E企盈营销工具技术服务商 热线:4006-838-530

picker,微信小程序picker

E企盈直播平台营销卖货系统

这个功能应该算是基础的了,下面讲讲它的实现:首先,其实是一个名为picker的组件:picker(微信官方文档)基础库1.0.0开始支持,低版本需做兼容处理。从底部弹起的滚动选择器。然后看看我的代码:这是HTML部分的代码:viewclass=’Select’pickermode=”multiSelector”bindchange=”bindMultiPickerChange”bindcolumnchange=”bindMultiPickerColumnChange”value=”{{multiIndex}}”range=”{{multiArray}}”viewclass=”picker”当前选择:{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}/view/picker/viewjs代码:Page({/页面的初始数据/data:{multiArray:[[‘2019年’,’2018年’,’2017年’],[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]],multiIndex:[0,0]},bindMultiPickerChange:function(e){this.setData({multiIndex:e.detail.value})},bindMultiPickerColumnChange:function(e){vardata={multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]=e.detail.value;this.setData(data);},})css代码:.Select{text-align:center;margin-top:15rpx;margin-bottom:15rpx;}.c_head{text-align:center;}/pages/home/bills/bills.wxss/.b_head{text-align:center;}.Select{text-align:center;margin-top:15rpx;}.f_tou{display:flex;justify-content:space-around;padding-top:40rpx;}.f_tou_in{height:150rpx;width:150rpx;border-radius:50%;}.f_inf{text-align:center;font-size:33rpx;}.f_each{display:flex;justify-content:space-between;margin-top:30rpx;padding-bottom:30rpx;border-bottom:1rpxrgba(0,0,0,0.171)solid;width:100%;}.f_each_left{margin-left:40rpx;}.f_each_right{margin-right:10rpx;width:100px;}首先看到multiArray:[[‘2019年’,’2018年’,’2017年’],[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]],表示两栏可供选择,则multiArray里面有两个数组,分别是年份和月份当前选择:{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}这个是HTML中的代码:multiArray[0][]表示访问年份数组——[‘2019年’,‘2018年’,‘2017年’]multiArray[1][]表示访问月份数组——[‘1月’,‘2月’,·····,‘12月’]都是用下标访问,这里具体说明:[‘2019年’,‘2018年’,‘2017年’]multiArray[0][0]的数据即表示2019年multiArray[0][1]的数据即表示2018年multiArray[0][2]的数据即表示2017年月份同理~~初始值,就是页面一打开显示的日期HTML中:当前选择:{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}js中:multiIndex:[0,0](检索的初始值)multiArray:[[‘2019年’,‘2018年’,‘2017年’],[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’]]multiArray[0][multiIndex[0]]的意思就是multiArray[0][0],也就是年份数组中的第一个‘2019年’multiArray[1][multiIndex[1]]的意思就是multiArray[1][1],也就是月份数组中的第一个‘1月’所以一开始显示:当前选择:2019年1月接下来具体介绍一下pickerpickermode=”multiSelector”bindchange=”bindMultiPickerChange”bindcolumnchange=”bindMultiPickerColumnChange”来看一下这个picker的属性设置:(1)mode=“multiSelector”表示这是一个多列选择器,具体多少列取决于range的值,相当于一个提供值的库下面是微信官方文档:使用多项选择器的时候是依赖于它的~~这里我们设置range=”{{multiArray}}”multiArray:[[‘2019年’,’2018年’,’2017年’],[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]]唔。。除了选择器的范围,这里还要设置选择器的取值“规则”,也就是value然后我们的代码是:value=”{{multiIndex}}”由于我们的是多项选择器,rang有两栏,所以对应的值value应该是含有两个元素的数组,value主要是用于调用函数的时候返回修改后的值。这里说value的值是number(数字)我个人觉得是不准确的,后面会详细解释(2)bindchange=“bindMultiPickerChange”这个是选择器的“值”value如果发生变化(即点击确认之后)就调用bindMultiPickerChange函数bindMultiPickerChange:function(e){this.setData({multiIndex:e.detail.value})}e.detail.value获取了修改后的value,再调用this.setData()就把索引multiIndex的值给更新了,则HTML中的“当前选择”才算更新~~下面是对参数的一些说明:e是event(这个事件对象),是一个类(Object)——这些信息在调试界面也有e.detail其实也是一个类(Object)e.detail.value是一个数组(Array),带有两个元素(其实是数组类,因为你可以看到它还附带了一些其他的信息)因为能够把value的值赋给multiIndex所以它其实也是一个数组类~~(3)进阶功能——日期的实时更新:如Demo所示:在滚动的同时“当前选择”的日期就发生了改变,关于这个实时更新其实是通过bindcolumnchange=“bindMultiPickerColumnChange”实现的:即每每滚动就会调用这个函数bindMultiPickerColumnChange:function(e){vardata={multiArray:this.data.multiArray,multiIndex:this.data.multiIndex};data.multiIndex[e.detail.column]=e.detail.value;this.setData(data);}函数的原理是构造一个类data去替换原先picker中的data类下面给出各参数的信息:首先是this.data.multiArray,表示picker(this)的data数据中的multiArray在multiArray类中又有年份类和月份类:Array(3)和Array(12)——提供可选择日期this.data.multiIndex,则是进行日期检索的工具,两个数字分别负责检索年份和月份把两个类封装进新建的data对象接下来是进行信息的实时更新,函数最重要的部分:用e.detail.column获取改变的列数(在我的例子中是第0列或第1列),column和value只是一个数字。对被修改的那一列的检索进行更新,用e.detail.column即可取到被修改的那一列注意!!这里的value不是数组!!!这是机制的问题,之前的value对应的是multiIndex中两个元素,必须得是数组而这里的value是在bindcolumnchange(列改变就调用)机制下,必定只有一个元素发生改变,没必要返回一个数组,所以,只返回一个数字即可然后是用新建的data对原this.data进行覆盖(this是可省略的)

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » picker,微信小程序picker
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏