picker

从底部弹起的滚动选择器。

效果展示

示例代码

WXML

<view class="page">
<view class="section">
<view class="section__title">普通选择器:默认</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" disabled="{{disabled}}" >
<view class="picker">当前选择:{{array[index]}}</view>
</picker>
</view>
<view class="section__title">普通选择器:selector</view>
<picker mode="selector" bindchange="bindPickerChange1" value="{{objindex}}"
range="{{objectArray}}" range-key="name" disabled="{{disabled}}" >
<view class="picker">当前选择:{{objectArray[objindex].name}}</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" bindchange="bindTimeChange" disabled="{{disabled}}">
<view class="picker">当前选择: {{time}}</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" bindchange="bindDateChange" disabled="{{disabled}}">
<view class="picker">当前选择: {{date}}</view>
</picker>
</view>
<button bindtap="toggle">切换禁用disabled:{{disabled}}</button>
</view>

JS

Page({
data: {
disabled: false,
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
objindex: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindPickerChange1: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
objindex: 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);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
console.log(data.multiIndex);
this.setData(data);
},
bindDateChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
},
bindcancel(){
console.log("cancel")
},
toggle() {
this.setData({
disabled: !this.data.disabled
})
}
})

WXSS

.picker{
padding: 13px;
background-color: #FFFFFF;
}

API

属性 类型 默认值 必填 说明
mode string selector 选择器类型
disabled boolean false 是否禁用

mode 的合法值

说明
selector 普通选择器
time 时间选择器
date 日期选择器

除了上述通用的属性,对于不同的mode,picker拥有不同的属性。

普通选择器:mode = selector

属性名 类型 默认值 说明
range array/object array [] mode 为 selector 或 multiSelector 时,range 有效
range-key string 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value number 0 表示选择了 range 中的第几个(下标从 0 开始)
bindchange eventhandle value 改变时触发 change 事件,event.detail = {value}

时间选择器:mode = time

属性名 类型 默认值 说明
value string 表示选中的时间,格式为”hh:mm”
bindchange eventhandle value 改变时触发 change 事件,event.detail = {value}

日期选择器:mode = date

属性名 类型 默认值 说明
value string 0 表示选中的日期,格式为”YYYY-MM-DD”
bindchange eventhandle value 改变时触发 change 事件,event.detail = {value}
  • 部分安卓手机日期滑动时数据会偏移中间显示。

多平台支持

属性 平台支持
mode 支付宝
disabled 支付宝

注释:

支付宝mode为日期时,可通过my.datePicker接口处理