从零开始学微信小程序之picker（五）

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}}"