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


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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
apache php模块整合操作指南
2012/11/16 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python 画出来六维图
2019/07/26 Python
Python基于内置函数type创建新类型
2020/10/22 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
大三学生英语考试作弊检讨书
2015/01/01 职场文书
同学会邀请函模板
2015/01/30 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题