[小程序开发]picker实现二级联动

2024年4月30日 09:20 by wst

小程序

---

问题

picker的官方例子是没有联动的，在实际开发当中经常有联动的需求。

比如在选择班级的时候，不同年级的班级个数不一样。就需要实现联动。

解决方法

这里只给出wxml文件和js文件的内容，如有其他问题可以留言。

视图wxml文件：

  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="label">
    <view class="item">
      <text class="item_head">班级</text>
      <text wx:if="{{multiIndex[0]==0&&multiIndex[1]==0}}" class="item_tail p16">请选择</text>
      <text wx:else class="item_tail p16">{{multiArray[0][multiIndex[0]].label}}{{multiArray[0][multiIndex[0]].children[multiIndex[1]].label}}班</text>
      <text class="iconfont icon-xiangxiajiantou"></text>
    </view>
  </picker>

逻辑js文件：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    from: "", // 标志页面来源
    multiData: [
    {
        "label": "七",
        "value": 1,
        "children": [
            {"label": "一", "value": 1},
            {"label": "二", "value": 2},
            {"label": "三", "value": 3},
            {"label": "四", "value": 4},
            {"label": "五", "value": 5},
            {"label": "六", "value": 6},
            {"label": "七", "value": 7},
            {"label": "八", "value": 8},
            {"label": "九", "value": 9},
            {"label": "十", "value": 9},
        ]
    }, {
        "label": "八",
        "value": 1,
        "children": [
            {"label": "一", "value": 1},
            {"label": "二", "value": 2},
            {"label": "三", "value": 3},
            {"label": "四", "value": 4},
            {"label": "五", "value": 5},
            {"label": "六", "value": 6},
            {"label": "七", "value": 7},
            {"label": "八", "value": 8},
            {"label": "九", "value": 9},
        ]
    }
],
    multiIndex: [0, 0],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 接收其他页面传递的数据
    console.log("options:", options);
    this.setData({
      from: options.from,
    });
    // 初始化多维数组
    var _this = this;
    console.log(_this.data.multiData);
    var multiData = _this.data.multiData;
    var multiIndex = _this.data.multiIndex;

    // 初始化多列数据
    _this.setData({
        multiArray: [
            multiData,
            multiData[0].children,
        ],
    })

  },



  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);
    // console.log(e);
    var _this = this;
    var multiData = _this.data.multiData;
    var multiIndex = _this.data.multiIndex;
    var columnIndex = e.detail.column;
    var columnValue = e.detail.value;

    multiIndex[columnIndex] = columnValue;

    _this.setData({
    multiArray: [
        multiData,
        multiData[multiIndex[0]].children,
    ],
})
console.log("one:", this.data.multiArray[0][this.data.multiIndex[0]].label);
console.log("two:", this.data.multiArray[0][this.data.multiIndex[0]].children[this.data.multiIndex[1]].label)
  },


});

总结

这里通过二级联动实现了班级的选择。

注意multiArray的动态赋值。

如果掌握了这个方法，还可以实现三级联动或者四级联动。

后续

细心的读者可能会发现，当用户不选择班级（使用班级的默认值时）界面上仍然显示“请选择”，显然是个bug，经过思考，解决方法如下：

添加一个标志位，当用户选完班级，点击确定后标志位变化为true.

js文件变动：

data: {
    from: "", // 标志页面来源
    ...
    select_class: false, // 是否选择了班级
    ...
}

bindMultiPickerChange: function (e) {
    console.log("picker发送选择改变，携带值为", e.detail.value);
    this.setData({
      multiIndex: e.detail.value,
      select_class: true
    });
  },

wxml文件变动：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="label">
    <view class="item">
      <text class="item_head">班级</text>
      <text wx:if="{{!select_class}}" class="item_tail p16">请选择</text>
      <text wx:else class="item_tail p16">{{multiArray[0][multiIndex[0]].label}}{{multiArray[0][multiIndex[0]].children[multiIndex[1]].label}}班</text>
      <text class="iconfont icon-xiangxiajiantou"></text>
    </view>
  </picker>

注意第4行的变化。

---