一、引入小程序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
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：3.4、sftp和多级分发
下一篇：小程序蓝牙发送分包数据方法
^