转：【⼩程序常见问题】下拉框选择器设置picker属性。
（包括：城市、⽇期和时间选择器）
1、picker写法（⽀持⽇期Date、时间Time和城市⾃定义）
wxml⽂件
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
js⽂件
Page({
data:{
index:0,
array:['北京','⼴州','上海','深圳']
},
bindPickerChange:function(e){
var that = this;
that.setData({
index: e.detail.value
})
}
})
2、下来框设置picker哪个属性
value表⽰选中了picker列表中的第⼏项，默认为0，即选中第⼀项
range设置picker列表中值，数据类型为数组
注：只需要设置picker的range属性和value属性的值即可
3、扩展：
picker
滚动选择器，现⽀持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，⽇期选择器，默认是普通选择器。
普通选择器：mode = selector
属性名类型默认值说明
range Array[]mode为 selector 时，range 有效
value Number0mode为 selector 时，是数字，表⽰选择了 range 中的第⼏个，从0开始。
bindchange EventHandle value改变时触发change事件，event.detail = {value: value}
时间选择器：mode = time
属性名类型默认值说明
value String表⽰选中的时间，格式为"hh:mm"
start String表⽰有效时间范围的开始，字符串格式为"hh:mm"
end String表⽰有效时间范围的结束，字符串格式为"hh:mm"
bindchange EventHandle value改变时触发change事件，event.detail = {value: value}
⽇期选择器：mode = date
属性名类型默认值说明
value String0表⽰选中的⽇期，格式为"yyyy-MM-dd"
start String表⽰有效⽇期范围的开始，字符串格式为"yyyy-MM-dd"
end String表⽰有效⽇期范围的结束，字符串格式为"yyyy-MM-dd"
fields String day有效值year,month,day，表⽰选择器的粒度
bindchange EventHandle value改变时触发change事件，event.detail = {value: value}
注意：开发⼯具暂时只⽀持mode = selector。
⽰例代码：
<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">时间选择器</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="2017-01-01" end="2017-12-31" bindchange="bindDateChange">    <view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
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
})
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。