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


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 相关文章推荐
jquery.tmpl JQuery模板插件
Oct 10 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 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 Calender(日历)代码分享
2014/01/03 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue实现放大镜效果
2020/09/17 Javascript
python写入xml文件的方法
2015/05/08 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
大二自我鉴定范文
2013/10/05 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
体育个人工作总结
2015/02/09 职场文书
银行自荐信怎么写
2015/03/05 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
基层工作经历证明
2015/06/19 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL