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


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 09 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
AngularJS service之select下拉菜单效果
Jul 28 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 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
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python注释详解
2016/06/01 Python
Python处理文本换行符实例代码
2018/02/03 Python
python3下载抖音视频的完整代码
2019/06/05 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python判断正负数方式
2020/06/03 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
银行介绍信范文
2014/01/10 职场文书
买卖合同协议书范本
2014/10/18 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript