如果对您有帮助,请关注我,加入微信小程序开发交流qq群(173683895)相互交流学习。谢谢
选择器示例demo:
1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器
源码:
wxml
<view class="container"> <!--选择器--> <view class="section"> <view class="section__title">普通选择器:(普通数组)</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> </view> <!--选择器--> <view class="section"> <view class="section__title">普通选择器2:(普通json格式数组)</view> <picker bindchange="bindPickerChange2" value="{{objectIndex}}" range="{{objectArray}}" range-key="name"> <view class="picker"> 当前选择:{{objectArray[objectIndex].name}} </view> </picker> </view> <!--选择器--> <view class="section"> <view class="section__title">多列选择器:</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}} </view> </picker> </view> <!--选择器--> <view class="section"> <view class="section__title">时间选择器:</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <!--选择器--> <view class="section"> <view class="section__title">日期选择器:</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view> <!--选择器--> <view class="section"> <view class="section__title">省市区选择器:</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> 当前选择:{{region[0]}},{{region[1]}},{{region[2]}} </view> </picker> </view> <!--end--> </view>
js
Page({ data: { //普通选择器:(普通数组) array: ['选项1', '选项2', '选项3', '选项4'], index: 0,//默认显示位置 //普通选择器2:(普通json格式数组) objectArray: [ { id: 0, name: '中国' }, { id: 1, name: '美国' }, { id: 2, name: '德国' }, { id: 3, name: '法国' } ], objectIndex: 0,//默认显示位置 //多列选择器: multiArray: [['音频', '视频'], ['mp3', '评书']],//二维数组,长度是多少是几列 multiIndex: [0, 0], //时间选择器: time: '12:01', //日期选择器: date: '2016-09-01', //省市区选择器: region: ['请选择', '请选择', '请选择'], customItem: '请选择'//为每一列的顶部添加一个自定义的项 }, //普通选择器: bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, //普通选择器2: bindPickerChange2: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ objectIndex: e.detail.value }) }, //多列选择器: bindMultiPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, ',值为', e.detail.value); if (e.detail.column==0){//第1列 if (e.detail.value == 0) {//音频 this.setData({ multiArray: [['音频', '视频'], ['mp3', '评书']] }) }; if (e.detail.value == 1) {//视频 this.setData({ multiArray: [['音频', '视频'], ['电影', '电视剧']] }) }; }; }, //时间选择器: bindTimeChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ time: e.detail.value }) }, //日期选择器: bindDateChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, //省市区选择器: bindRegionChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ region: e.detail.value }) } })
css
/*选择器 */ .section__title{ margin-bottom: 20rpx; } .section{ margin: 50rpx 0; font-size: 30rpx; }
效果图:
1
2
3
4
5