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


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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript delete 属性的使用
Oct 08 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
axios post提交formdata的实例
Mar 16 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
从零开始封装自己的自定义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
Terran魔法科技
2020/03/14 星际争霸
奇怪的PHP引用效率问题分析
2012/03/23 PHP
在PHP中使用redis
2013/11/04 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python常用模块介绍
2014/11/21 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python函数的5种参数详解
2017/02/24 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
有关环保的标语
2014/06/13 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
雷锋的故事观后感
2015/06/10 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python