picker(滚动选择器)
属性介绍
picker组件官方API链接:https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
如图,是一个这样的效果
普通选择器:mode = selector
多列选择器:mode = multiSelector
时间选择器:mode = time
日期选择器:mode = date
省市区选择器:mode = region 1.4.0
一个实例
如图,是一个选课的二级联动滚动列表,其中选修课和必修课的二级列表不相同
WXML代码:
<view>选课选择器(多列选择器)</view>
<view class="section">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
value="{{multiIndex}}"
range="{{multiArray}}">
<input value='{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}'></input>
</picker>
</view>
js中的代码:
Page({
/**
* 页面的初始数据
*/
data: {
multiArray: [['选修课', '必修课'],
['毛概', '邓论', '大学语文']],
objectMultiArray: [
[
{
id: 0,
name: '选修课'
},
{
id: 1,
name: '必修课'
},
],
[
{
id: 0,
name: '毛概'
},
{
id: 1,
name: '邓论'
},
{
id: 1,
name: '大学语文'
}
]
],
multiIndex: [],
},
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] = ['毛概', '邓论', '大学语文'];
break;
case 1:
data.multiArray[1] = ['数电', '模电', '操作系统'];
break;
}
break;
}
this.setData(data);
}
})
其中相关属性释义:
选择器类型为多列选择器:
mode="multiSelector"
value改变时触发change事件:
bindchange="bindMultiPickerChange"
列改变时触发:
bindcolumnchange="bindMultiPickerColumnChange"
表示选择了range中的第几个:
value="{{multiIndex}}"
mode为selector或multiSelector时,range有效:
range="{{multiArray}}"