转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)

时间:2021-02-02 14:33:56

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 Number 0 mode为 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 String 0 表示选中的日期,格式为"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
})
}
})

转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)