微信小程序组件之picker-view-微信小程序最难的是组件-微信小程序组件开发-即速应用

微信小程序组件之picker-view-微信小程序最难的是组件-微信小程序组件开发

浏览量：5356 时间：2020-04-06 来源：技术引领者

picker-view1.
嵌入页面的滚动选择器
属性名类型说明最低版本valueNumberArray数组中的数字依次表示picker-view内的picker-view-column选择的第几项（下标从0开始），数字大于picker-view-column可选项长度时，选择最后一项。indicator-styleString设置选择器中间选中框的样式indicator-classString设置选择器中间选中框的类名1.1.0mask-styleString设置蒙层的样式1.5.0mask-classString设置蒙层的类名1.5.0bindchangeEventHandle当滚动选择，value改变时触发change事件，event.detail{value:value}；value为数组，表示picker-view内的picker-view-column当前选择的是第几项（下标从0开始）bindpickstartEventHandle当滚动选择开始时候触发事件2.3.1bindpickendEventHandle当滚动选择结束时候触发事件2.3.12.
注意：其中只可放置picker-view-column/组件，其他节点不会显示。
picker-view-column3.
仅可放置于picker-view/中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
4.
示例代码：
5.
在开发者工具中预览效果
viewview{{year}}年{{month}}月{{day}}日/viewpicker-viewindicator-style"height:50px;"style"width:100%;height:300px;"value"{{value}}"bindchange"bindChange"picker-view-columnviewwx:for"{{years}}"style"line-height:50px"{{item}}年/view/picker-view-columnpicker-view-columnviewwx:for"{{months}}"style"line-height:50px"{{item}}月/view/picker-view-columnpicker-view-columnviewwx:for"{{days}}"style"line-height:50px"{{item}}日/view/picker-view-column/picker-view/viewconstdatenewDate()constyears[]constmonths[]constdays[]6.
for(leti1990;idate.getFullYear();i++){years.push(i)}
7.
for(leti1;i12;i++){months.push(i)}
8.
for(leti1;i31;i++){days.push(i)}
9.
Page({data:{years:years,year:date.getFullYear(),months:months,month:2,days:days,day:2,value:[9999,1,1],},bindChange:function(e){constvale.detail.valuethis.setData({year:this.data.years[val[0]],month:this.data.months[val[1]],day:this.data.days[val[2]]})}})
Tipstip:滚动时在iOS自带振动反馈，可在系统设置-声音与触感-系统触感反馈中关闭总结10.
value里面的值为默认值;案例中只有年月日，如果想参考年月日时分秒，请参考博客[https://blog.csdn.net/qq_37022150]
更多文章，请关注博客