微信小程序实现自定义多列选择器使用丨本际云推荐

微信小程序实现自定义多列选择器使用

多列选择器实现步骤

在项目搭建过程中，需要实现一个多列选择器。在用户确定之前，无论列表如何转，对于已选择的都不会有影响，只有在确定选择内容后才显示值上。

微信小程序实现自定义多列选择器使用

思路：保存两份数据，一份用来存放用户选择的中间值，当用户点击确定时，把中间值更新为已确认值。如果用户选择取消，就把中间值更新为已确认值。因为微信小程序中的多列选择器是用数组存放数据，因此在拷贝中涉及到深拷贝，必须是深拷贝才能实现上面的设想。

实现深拷贝的方法

可以使用下面的代码实现深拷贝：

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
  })
},

效果图如下：

多列选择器效果图