WeUI for 小程序picker选择器

2018年10月30日 09:22 | 57次浏览 作者原创 版权保护

 一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录picker以及文件picker.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Picker</view>
<view class="page__desc">选择器,这里使用小程序原生的picker。</view>
</view>
<view class="page__bd">
<view class="weui-btn-area">
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<button type="default">单列选择器</button>
</picker>
<picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<button type="default">时间选择器</button>
</picker>
<picker class="weui-btn" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<button type="default">日期选择器</button>
</picker>
</view>
</view>
</view>

如上述代码三种选择器,分别是单列选择器,时间选择器,日期选择器


三、在根目录app.json配置文件中配置picker文件路径,保存后会自动生成对应的js、css等文件

"pages/picker/picker",


四、picker.wxss样式代码

page{
background-color: #FFFFFF;
}


五、picker.js代码实现

Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
bindTimeChange: function(e) {
this.setData({
time: e.detail.value
})
}
});<!-- V型知识库原创 www.vxzsk.com -->

上述代码中三个函数分别实现三种选择器功能


六、效果


七、bug问题

单列选择器有个bug,用手机预览,选择器的值无论上滑动还是下滑动会反反复复出现选择值,无限滑动,在IOS系统上正常,安卓系统会反反复复无限滑动。


此文章本站原创,地址 https://www.vxzsk.com/1918.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程