微信小程序如何自定义多列选择器

今天小编给大家分享一下微信小程序如何自定义多列选择器的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

项目需要，需要实现一个多列选择器，在用户确定之前，无论列表如何转，都不会影响已确定值的显示，只要用户选择确定才会把新选择的内容更新到已确定的显示值上。

目前个人思路是保存两份，一份用来存放用户选择的中间值，当用户点击确定时，把中间值更新为已确认值。如果用户选择取消，就把中间值更新为已确认值。

因为微信小程序中的多列选择器是用数组存放数据，因此在拷贝中涉及到深拷贝，必须是深拷贝才能实现上面的设想。
因此可以下面代码实现深拷贝：

var arr=JSON.parse(JSON.stringify(this.data.multiArray));

wxml:

<picker bindcancel="cancelAddr" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{demoIndex}}" range="{{demoArray}}">
            <view class="picker">
                收货地址:{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
            </view>
        </picker>

js:

data:{
     multiArray: [
      ['广大生活区', '广大教学区'],
      ['B1', 'B2', 'B3'],
      ['一楼', '二楼', '三楼']
    ],
    demoArray:  [
      ['广大生活区', '广大教学区'],
      ['B1', 'B2', 'B3'],
      ['一楼', '二楼', '三楼']
    ],
    //实际显示值
    multiIndex: [0, 0, 0],
    //临时变量
    demoIndex: [0, 0, 0],
    teach: ["文清楼", "文新楼", "文俊西楼"],
    life: ['B1', 'B2', 'B3']
    }

//修改过程中取消修改
  cancelAddr() {
    var arr = JSON.parse(JSON.stringify(this.data.multiArray));
    var index = JSON.parse(JSON.stringify(this.data.multiIndex));
    this.setData({
      demoArray: arr,
      demoIndex: index
    })
  },
  //地址选择器改变
  bindMultiPickerColumnChange(e) {
    var value = e.detail.value;
    var column = e.detail.column;
    var demoArray = this.data.demoArray;
    var demoIndex = this.data.demoIndex;
    if (column === 0 && value != demoIndex[0]) {
      if (value === 0) {
        demoArray[1] = this.data.life;
      } else {
        demoArray[1] = this.data.teach;
      }
    }
    demoIndex[column] = value;
    this.setData({
      demoArray: demoArray,
      demoIndex: demoIndex
    })
  },
  //确定选中的地址
  bindMultiPickerChange() {
    console.log("all change");
    var arr = JSON.parse(JSON.stringify(this.data.demoArray));
    var index = JSON.parse(JSON.stringify(this.data.demoIndex));
    this.setData({
      multiArray: arr,
      multiIndex: index
    })
  },

效果图（上面代码的数据数量删除了部分）：

以上就是“微信小程序如何自定义多列选择器”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。