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

3403771864 发布于2022-11-10 22:23 / 516人阅读

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

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

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

　　因此可以下面代码实现深拷贝：

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

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

　　详细代码和效果展示就说道这里，欢迎大家关注更多精彩内容。

GPU云服务器云服务器微信小程序技术实现微信小程序怎么使用怎样使用微信小程序如何使用微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128305.html

mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 评论0 收藏0
演示微信小程序地区选择伪五级联动

　　在项目中，要求微信小程序的地区可以选择伪五级联动　　展示如下　　这里采用的是自定义多列选择器picker mode="multiSelector"　　<viewclass="section"> 　　<viewclass="section__title">多列选择器</view> 　　<pick...

3403771864 2022-11-08 23:27 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0