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]
})
}