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

3403771864 發布于2022-11-10 22:23 / 548人閱讀

　　在項目搭建過程中吃，需要實現一個多列選擇器，在用戶確定之前，無論列表如何轉，對于已選擇的都不會有影響，只有在確定選擇內容后才顯示值上。

　　思路：保存兩份，一份用來存放用戶選擇的中間值，當用戶點擊確定時，把中間值更新為已確認值。如果用戶選擇取消，就把中間值更新為已確認值。

　　因為微信小程序中的多列選擇器是用數組存放數據，因此在拷貝中涉及到深拷貝，必須是深拷貝才能實現上面的設想。

　　因此可以下面代碼實現深拷貝：

　　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云服務器微信小程序技術實現微信小程序怎么使用怎樣使用微信小程序如何使用微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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