微信小程序实现页面监听自定义组件的触发事件

微信小程序实现页面监听自定义组件的触发事件，供大家参考，具体内容如下

需求：在微信小程序开发过程中，页面通常会用到提示弹框。这时为了减少代码量及代码可拓展性，我们自定义一个提示组件是必不可少的了。那么问题来了，页面如何监听到组件的触发事件呢？
下面给大家详细讲解页面如何监听自定义组件的触发事件。

prompt组件：

1.首先搭建提示组件ui。由于后面各个页面都有可能用到该组件，所以我选择从页面传值过来显示提示语；
2.然后在prompt.js的点击事件里指定方法名称，该方法名称在后面的页面调用监听组件时需要用到；

// prompt.wxml
<view class="main" catchtouchmove="catchTouchMove">
 <view class="main-mask"></view>
 <view class="main-content">
 <view class="content-title">提示</view>
 <view class="content-text">{{txtTips}}</view>
 <button class="btn-confirm" bindtap="bindConfirm">確定</button>
 </view>
</view>
// prompt.js
Component({
 /**
  * 组件的属性列表
  */
 properties: {
  txtTips: String,//声明属性类型
 },

 /**
  * 组件的初始数据
  */
 data: {

 },

 /**
  * 组件的方法列表
  */
 methods: {
  //确认按钮
  bindConfirm: function (e) {
   this.triggerEvent('events');
  },

  // 截获竖向滑动--禁止底部页面滑动
  catchTouchMove: function (res) {
   return true;
  },
 }
})

home页面：

1.首先需要在home.json的"usingComponents"属性里引入prompt组件地址；
2.然后在home.wxml中引入<prompt />组件，且绑定的事件名称要跟组件中triggerEvent方法指定的名称一致；
3.完成上面2个步骤后，我们就可以在js页面就可以监听操作组件的触发事件啦；

// home.json
{
 "usingComponents": {// 需引入自定义组件地址
  "prompt": "/component/prompt/prompt"
 }
}
// home.wxml
<view class="main">
 <button bindtap="bindEjectComponent">弹出自定义组件</button>
 <!-- 提示组件 -->
 <prompt txtTips="{{txtTips}}" bind:events="bindPromptConfirm" wx:if="{{isShowPromptComponent}}"/>
</view>
// home.js
Page({
 /**
 页面的初始数据
  */
 data: {
  isShowPromptComponent: false,//是否显示提示控件组件
 },

 //点击弹出自定义组件
 bindEjectComponent:function(e){
  var that = this;
  that.setData({
   isShowPromptComponent: true,
   txtTips:"Hi，我是自定义提示组件喔!",
  })
 },

 //提示组件确认事件
 bindPromptConfirm: function (e) {
  var that = this;
  that.setData({
   isShowPromptComponent: false,
  })
 },
})

看到这里‘页面监听组件触发事件'功能就实现啦！！！最后上演示视频，看看效果:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序全局变量改变监听的实现方法

    问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面. 需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层,并且动态的展示值,这个值的来源就是最后一个组件页面中的内容. 处理办法 当时想到的就是使用全局变量,在 app.js 中定义好全局变量,点击组件页面时就修改全局变量的值,父页面同样使用全局变量的值,这样一来就可以动态打开/关闭弹出层且传递值了. 下面先看看 app.js 中怎么定义的: glob

  • 微信小程序监听用户登录事件的实现方法

    最近在开发小程序,小程序既需兼顾针对新用户的内容预览,又要为注册用户提供服务,简单梳理下,基本需求如下: 小程序共三个tab页,所有用户都可以浏览首页内容,了解我们可以提供的优质服务: 进入其他两个页面之后,如果用户没有登录,那就显示登录按钮,如果登录了,则显示服务内容: 用户在一个页面登陆之后,全局生效. 就这么个看起来很简单的需求,也经过了如下迭代: 将登录状态和凭据存储在 App.globalData.authorize 中,每个需要授权的页面 onload 生命周期检查 App.glob

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • 微信小程序 实现拖拽事件监听实例详解

    微信小程序 实现拖拽事件监听实例详解

    微信小程序 拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

  • 微信小程序局部刷新触发整页刷新效果的实现代码

    微信小程序局部刷新触发整页刷新效果的实现代码

    效果图 如上图所示,头部的选项栏时固定的(fixed),下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果,如果去掉fixed当我们上拉的时候,选项栏又无法固定,所以我们需要监听页面下拉的状态随时改变选项栏的状态 1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop }, 2信息栏监听下拉状态的改变而改变自己的状态 :class="scrollTop>0?'head-title-fixed':'head-title

  • 微信小程序在其他页面监听globalData中值的变化

    微信小程序在其他页面监听globalData中值的变化

    前言 这几天去面试,多次碰到同一个知识点.而且有一次面试挺有趣的,是关于小程序的.共有3个问题. 1.小程序中Page.watch()方法是做什么用的? 2.小程序中如何在其他页面中监听到globalData中值的变化? 3.如果在app.js执行登录部分的代码,由于时序问题,如何处理其他页面请求时未获取到身份识别标记的情况.(session,userid等).(大意是:怎么能够保证其他页面请求是在登录之后?) 知识点 有经验的同学可能一下子就看出来了,这其实说的是同一个东西,那就是Object

  • 微信小程序实现watch监听

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其实就是嫌麻烦...). 小程序实现 类似vue 一样的watch 监听数据 将方法注册到app.js 中也可以使用高级一点的写法 使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次.本文对装饰器模式不做介绍这是个思路.等待下次实现 set

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • 微信小程序判断页面是否从其他页面返回的实例代码

    微信小程序判断页面是否从其他页面返回,具体内容如下所示: 在 data 中自定义一个标记变量,在onLoad里 Page({ data: { isNewOpen: true, //判断当前页面是新打开还是从其他页面返回 list: [], page: 0 }, onLoad: function() { this.getList() }, getList () { // ... }, goDetail (e) { this.setData({ isNewOpen: false }) wx.navi

  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water

  • 微信小程序跨页面数据传递事件响应实现过程解析

    这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙伴. 本次示例采用 uni-app 框架和 weui 样式库 实现思路 创建一个 Emitter,用于事件处理 创建一个 ... 在实际工作中有很多场景需要在第二个页面中将用户操作之后的将数据回传到上一页面.接下来将我的方案分享给小伙

  • 10分钟彻底搞懂微信小程序单页面应用路由

    10分钟彻底搞懂微信小程序单页面应用路由

    单页面应用特征 「假设:」 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面. 「多页面应用:」 点击按钮,会从新加载一个html资源,刷新整个页面: 「单页面应用:」 点击按钮,没有新的html请求,只发生局部刷新,能营造出一种接近原生的体验,如丝般顺滑. SPA 单页面应用为什么可以几乎无刷新呢?因为它的SP--single-page.在第一次进入应用时,即返回了唯一的html页面和它的公共静态资源,后续的所谓"跳转",都不再从服务端拿html文件,只是DOM的替换操作

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 详解微信小程序胶囊按钮返回|首页自定义导航栏功能

    项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页

随机推荐