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


Posted in Javascript onNovember 01, 2020

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

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

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,
 })
 },
})

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

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

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js实现文字滚动效果
Mar 03 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 #Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 #Javascript
微信小程序实现星星评分效果
Nov 01 #Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
You might like
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
js密码强度校验
2015/11/10 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
Django实现简单分页功能的方法详解
2017/12/05 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python super用法及原理详解
2020/01/20 Python
Python3 读取Word文件方式
2020/02/13 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
String和StringBuffer的区别
2015/08/13 面试题
客服专员岗位职责范本
2013/11/29 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年资料员工作总结
2015/04/25 职场文书
写给老师的保证书
2015/05/09 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers