微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题


Posted in Javascript onOctober 09, 2018

首先我们在pages文件夹下创建components目录用于存放自定义组件。如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件。

  微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题 

图1                      

微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

  图2

如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步。

一、首先把dialog组件的样式写好,并在index页面相应的位置引用。以下就是代码啦(分别为:wxml、wxss、js、json)

<view class='wx_dialog_container' hidden="{{!isShow}}">
 <view class='wx-mask' bindtap='close'></view>
 <view class='wx-dialog'>
 <text class='li' bindtap='groupClick' wx:for="{{items}}" data-index='{{index}}' wx:for-item="item">{{item.department}}</text> 
 </view>
 </view>

.wx_dialog_container{
 width: 100%;
 height: 100%;
 z-index: 999;
}
.wx-mask{
 position: fixed;
 z-index: 1000;
 top: 0;
 right: 0;
 left: 35%;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
}
.wx-dialog{
 position: fixed;
 min-width: 528rpx;
 height: 100%;
 left: 0;
 top:314px;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 background-color: #FFFFFF;
 text-align:left;
}
.wx-dialog .li{
 display: block;
 font-size: 18px;
 margin-top:28px;
 margin-left:154px;
}

Component({
 properties: {
 
 },
 data: {
 isShow: false,
 animationData: {},
 color:"#000",
 items:[
 { department: '研发部'},
 { department: '设计部' },
 { department: '人事部'},
 { department: '销售部' },
 { department: '市场运营部' },
 ]
 },

 methods: {
 show: function () {
 this.setData({
 isShow: true
 });
 },
 
 close: function () {
 this.setData({
 isShow: false
 })
 },

 // 自定义组件与页面之间的数据通信
 groupClick: function (e){
 var group = this.data.items[e.target.dataset.index]
 console.log(group)
 // 使用 triggerEvent 方法触发自定义组件事件,指定事件名、detail对象和事件选项
 this.triggerEvent('okEvent', { group}, {})
 
 
 this.setData({
 isShow: false

 })
 },
 
 },
})

{
 "component": true
}

最后一步别忘了在你相应的页面中引用它,注意:自定义组件名称要和components目录下的一致。如下图我在index.wxml中使用它

微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

二、组件与页面怎么数据通信呢?

•首先要知道你点击的是列表中的哪个部门,所有要为列表元素添加一个 groupClick事件 打印出事件对象 e ,我们发现我们要的数据在e.target.dataset.index里
•已经得到数据对象了,下一步就是想办法把它传递给 index页面更新数据。在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称,所以还要在组件身上绑定个自定义事件,第二个对象就是你要传递的数据,第三个一般不用(代码参见标黄部分)
•最后就是在页面的index.js中定义这个事件来接收dialog的数据,并打印出 e 找到数据更新数据。(如下代码) 

// 接受triggerEvent 方法触发的自定义组件事件来更新同步数据
 okEvent: function (e) {
 console.log(e)
 this.setData({
 groupName: e.detail.group.department
 })
 
 },

三、最后一个小知识

如果想在 index.js逻辑中引用dialog.js 中methods里定义好的方法,需要在index.js 中添加如下代码

onReady: function () {
 this.dialog = this.selectComponent('#dialog');
 },

比如:我把show、close 方法定义在了组件中的methods 里,要在index页面中触发某个时间让dialog展示,只需在index.js 中这么写即可。

微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

总结

以上所述是小编给大家介绍的微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 #Javascript
vue axios 简单封装以及思考
Oct 09 #Javascript
angularJS实现不同视图同步刷新详解
Oct 09 #Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 #Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 #Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
You might like
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
javascript jQuery插件练习
2008/12/24 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
用Python编写一个国际象棋AI程序
2014/11/28 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
微信跳一跳游戏python脚本
2020/04/01 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
python实现马丁策略的实例详解
2021/01/15 Python
实习生自荐信范文分享
2013/11/27 职场文书
体育教师自荐信范文
2013/12/16 职场文书
施工安全保证书
2015/05/09 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers