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


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 相关文章推荐
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
Vue源码探究之状态初始化
Nov 14 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
Python中表示字符串的三种方法
2017/09/06 Python
Sanic框架Cookies操作示例
2018/07/17 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
体育教学随笔感言
2014/02/24 职场文书
化妆品店促销方案
2014/02/24 职场文书
书法大赛策划方案
2014/06/04 职场文书
物资采购方案
2014/06/12 职场文书
七一建党节演讲稿
2014/09/11 职场文书
指导教师推荐意见
2015/06/05 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL