快捷導(dǎo)航

微信小程序自定義多列選擇器使用

更新時(shí)間：2022年07月11日 10:22:46 作者：赫蘿的紅蘋(píng)果

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義多列選擇器使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序自定義多列選擇器的具體代碼，供大家參考，具體內(nèi)容如下

項(xiàng)目需要，需要實(shí)現(xiàn)一個(gè)多列選擇器，在用戶(hù)確定之前，無(wú)論列表如何轉(zhuǎn)，都不會(huì)影響已確定值的顯示，只要用戶(hù)選擇確定才會(huì)把新選擇的內(nèi)容更新到已確定的顯示值上。

目前個(gè)人思路是保存兩份，一份用來(lái)存放用戶(hù)選擇的中間值，當(dāng)用戶(hù)點(diǎn)擊確定時(shí)，把中間值更新為已確認(rèn)值。如果用戶(hù)選擇取消，就把中間值更新為已確認(rèn)值。

因?yàn)槲⑿判〕绦蛑械亩嗔羞x擇器是用數(shù)組存放數(shù)據(jù)，因此在拷貝中涉及到深拷貝，必須是深拷貝才能實(shí)現(xiàn)上面的設(shè)想。
因此可以下面代碼實(shí)現(xiàn)深拷貝：

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: [
? ? ? ['廣大生活區(qū)', '廣大教學(xué)區(qū)'],
? ? ? ['B1', 'B2', 'B3'],
? ? ? ['一樓', '二樓', '三樓']
? ? ],
? ? demoArray: ?[
? ? ? ['廣大生活區(qū)', '廣大教學(xué)區(qū)'],
? ? ? ['B1', 'B2', 'B3'],
? ? ? ['一樓', '二樓', '三樓']
? ? ],
? ? //實(shí)際顯示值
? ? multiIndex: [0, 0, 0],
? ? //臨時(shí)變量
? ? demoIndex: [0, 0, 0],
? ? teach: ["文清樓", "文新樓", "文俊西樓"],
? ? life: ['B1', 'B2', 'B3']
? ? }

//修改過(guò)程中取消修改
? 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
? ? })
? },

效果圖（上面代碼的數(shù)據(jù)數(shù)量刪除了部分）：