picker

picker就是类似上图的滑动选择?

picker | 微信开放文档

常用属性 mode, range, bindchange

<picker mode="time" range="{{array}}" start="06:30" end="18:30" bindchange="bindTimeChange"> <view class="picker"> 当前选择:{{time}} </view> </picker>

?需要注意的是picker中的显示最好用一个<view>显示在那里，picker本身不提供显示选项和显示更改后的选项，它作为一个组件只是提供弹出滑动多选项的功能！

JS文件

data: { time:'12:01', }, bindTimeChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ time: e.detail.value }) },

显示更改后的数据，一般用bindchange关联一个更改函数

更改效果由JS文件里重新设置time数据，因为time要更改，所以用{{time}}来取值.

picker-view，picker-view-column

picker-view是一个大组件，如上图所示，中间嵌套的每一列为picker-view-column

<view class="container"> <view class="page-body"> <view class="selected-date">{{year}}年{{month}}月{{day}}日{{isDaytime ? "白天" : "夜晚"}}</view> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <view wx:for="{{years}}" wx:key="{{years}}" style="line-height: 50px; text-align: center;">{{item}}年</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" wx:key="{{months}}" style="line-height: 50px; text-align: center;">{{item}}月</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" wx:key="{{days}}" style="line-height: 50px; text-align: center;">{{item}}日</view> </picker-view-column> <picker-view-column> <view class="icon-container"> <image class="picker-icon" src="../lib/daytime.png" /> </view> <view class="icon-container"> <image class="picker-icon" src="../lib/night.png" /> </view> </picker-view-column> </picker-view> </view> </view>

其中picker-view由style属性，可以设置字体和滑动口的样式,也是bandchange修改，一次修改多个

bindChange(e) { const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[2]], isDaytime: !val[3] }) }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。