微信小程序如何实现自定义的多列选择器功能？

本文共计1000个文字，预计阅读时间需要4分钟。

本文分享了一个微信小程序自定义多列选择器的整体代码。项目需求是实现一个多列选择器，用户在确定之前，无需列表转换，即可直接显示选择结果。以下是具体内容：

项目需求：

1.实现一个多列选择器。

2.在用户确定之前，无需列表转换，直接展示选择结果。

实现步骤：

1. 设计多列选择器界面，包括选择项的显示和隐藏。

2.编写逻辑代码，实现选择项的选中与取消选中功能。

3.将选中项的结果直接展示在界面上，无需列表转换。

代码示例：

javascript

// 页面逻辑Page({ data: { // 初始化选择项数据 items: [ { id: 1, name: '选项1' }, { id: 2, name: '选项2' }, // ...其他选项 ], // 选中的选项 selected: [] }, // 选择选项 selectItem: function(e) { const id=e.currentTarget.dataset.id; const index=this.data.selected.indexOf(id); let newSelected; if (index===-1) { // 如果未选中，添加到选中数组 newSelected=this.data.selected.concat(id); } else { // 如果已选中，从选中数组中移除 newSelected=this.data.selected.filter(item=> item !==id); } // 更新选中状态 this.setData({ selected: newSelected }); }, // 确认选择 confirm: function() { // ...处理确认逻辑 }});

总结：通过以上代码，可以实现一个简单的微信小程序自定义多列选择器。用户在选择过程中，无需列表转换，即可直接看到选择结果。

本文实例为大家分享了微信小程序自定义多列选择器的具体代码，供大家参考，具体内容如下

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。