微信小程序中实现多级联动方法、联动选择

原创
2020/06/28 09:16
阅读数 8.3K

一、小程序中目前对于地区支持region

默认的三级地区联动选择,可以直接使用。

 

二、对于更多需求,需要自定义联动选择,其中的一个解决方案处理如下:

原理使用picker的多列选择功能 和事件处理选择联动。

以下是一个二级联动选择的示例:

    arrayFourth: [ [], []],//多级选择数组
    valueFourth: [0, 0],//多级选择结果index
    sourceFourth: [{
        id: 1,
        text: '一年级',
        children: [{
          id: 1,
          text: '张三丰'
        }, {
          id: 2,
          text: '李四'
        }, {
          id: 2,
          text: '王明'
        }]
      },
      {
        id: 2,
        text: '二年级',
        children: [{
          id: 3,
          text: '王五'
        }, {
          id: 4,
          text: '赵柳'
        }]
      },
    ],//后台读取的所及数据源

wxml 数据绑定和事件绑定

<picker range="{{arrayFourth}}" value="{{valueFourth}}" range-key="text" mode="multiSelector" 
bindchange="bindMultiPickerChange" 
bindcolumnchange="bindMultiPickerColumnChange">
	请选择Fourth 多级联动
</picker>

js事件监听和处理

//点击确定选择结果时,保存结果
  bindMultiPickerChange: function (e) {
    var result = e.detail.value;
    console.info(result);
  },
  //选择列变更时,处理下级数组变更
  bindMultiPickerColumnChange: function (e) {
    var column = e.detail.column;
    var index = e.detail.value;
    var array = this.data.arrayFourth;
    if (column == 0) {
      array[1] = array[column][index].children;
      this.setData({
        arrayFourth: array
      });
    } else if (column == 1) {
      //最后一列不处理
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //初始化弹出面板
    var array = this.data.arrayFourth;
    array[0] = this.data.sourceFourth;
    array[1] = array[0][0].children;
    this.setData({
      arrayFourth: array
    });
  },

更多:

 微信小程序实现多级展开功能

微信小程序如何隐藏右上角分享按钮

微信小程序授权获取手机号,提示获取失败,该appId没有权限

 

 

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部