前言

在 uni-app 開發中遇到一個二級聯動的需求，使用 picker元件實現時遇到一點問題。

特此記錄一下~

Part.1 效果

Part.2 遇到問題

由於官方對此元件用法已經介紹 (https://uniapp.dcloud.io/component/picker) 的很詳細了，我就不多贅述了 0.0~

主要給大家說下我遇到的問題：

滾動一級分類時，二級分類資料變化的問題

第一：在微信小程式端的時，直接賦值 this.classifyArr[1] = this.childArr[0]， 二級分類無法切換， 需用到 $set (https://cn.vuejs.org/v2/api/#Vue-set

第二：在 H5 端時，使用 $set 又會導致一級分類無法滾動( 現在也沒明白是什麼原因 )，但可直接賦值this.classifyArr[1] = this.childArr[0]

Part.3 程式碼展示

HTML

 1 <template>
 2     <view class="content">
 3         <view class="content-box">
 4             <view class="box">
 5                  <view class="box-item"
 
>
 6                      <picker class="item-picker"
 7                              mode="multiSelector"
 8                              range-key="name" 
 9                              @change="classifyChange"
10                              @columnchange="columnchange" 
11                              :value
 
="classifyIndex" 
12                              :range="classifyArr">
13                          <view>{{ name }}</view>
14                      </picker>
15                  </view>
16             </view>
17         </view>
18     </view>
19 </template>

JS

  1 <script>
  2     export default {
  3         data() {
  4             return {
  5                  dataSource: [
  6                     { id: 1, 
  7                        name: '星期一', 
  8                        child: [
  9                            {
 10                                id: 2,
 11                                name: '星期一晴天'
 12                            },
 13                            {
 14                                id: 3,
 15                                name: '星期一雨天'
 16                            },
 17                        ],
 18                     },
 19                     { id: 4,
 20                        name: '星期二', 
 21                        child: [
 22                            {
 23                                id: 5,
 24                                name: '星期二暴雨'
 25                            },
 26                            {
 27                                id: 6,
 28                                name: '星期二轉晴'
 29                            },
 30                            {
 31                                id: 7,
 32                                name: '星期二冰雹'
 33                            },
 34                        ],
 35                     },
 36                     { id: 8,
 37                        name: '星期三', 
 38                        child: []
 39                     },
 40                     { id: 9,
 41                        name: '星期四', 
 42                        child: [
 43                            {
 44                                id: 10,
 45                                name: '星期四大太陽'
 46                            }               
 47                        ]
 48                     },
 49                     { id: 11,
 50                        name: '星期五', 
 51                        child: [
 52                            {
 53                                id: 12,
 54                                name: '星期五快了'
 55                            },
 56                           {
 57                                id: 13,
 58                                name: '星期五又下雨'
 59                            }
 60                        ]
 61                     },
 62                  ], 
 63                 
 64                 name: '請選擇分類', 
 65                 
 66                 classifyArr:[[], []], // picker - 資料來源
 67                 classifyIndex: [0, 0], // picker - 索引
 68                 
 69                 childArr:[], // 二級分類資料來源
 70             }
 71         },
 72         onLoad: function(options) {    
 73             // 獲取資料來源並分出一級二級分類
 74             this.getAllClassify()
 75         },
 76         methods: {
 77              // 獲取資料來源並分出一級二級
 78             getAllClassify() {
 79                 let dataLen = this.dataSource.length;
 80                 
 81                 for (let i = 0; i < dataLen; i++) {
 82                     // 將資料來源中的二級分類 push 進 childArr，作為二級分類的資料來源
 83                     this.childArr.push(this.dataSource[i].child) 
 84                 };
 85                 
 86                 // 一級分類的資料來源
 87                 this.classifyArr[0] = this.dataSource;
 88                 
 89                 // 第一次開啟時，預設給一級分類新增它的二級分類
 90                 this.classifyArr[1] = this.childArr[0]
 91             },
 92             
 93             // 選擇商品分類
 94             classifyChange(e) {
 95                 let value = e.target.value;
 96                 this.classifyIndex = value;
 97                 
 98                 if (this.classifyArr[0].length != 0) {
 99                     this.name = this.classifyArr[0][this.classifyIndex[0]].name
100                 };
101                 
102                 if (this.classifyArr[1].length != 0) {
103                     this.name += ',' + this.classifyArr[1][this.classifyIndex[1]].name
104                 }
105             },
106             
107             // 獲取二級分類
108             columnchange(e) {
109                 // 當滾動切換一級分類時，為當前的一級分類新增它的子類
110                 if (e.detail.column == 0) {
111                     // #ifdef H5
112                     // 在小程式中直接賦值無效  H5 可直接賦值
113                     this.classifyArr[1] =  this.childArr[e.detail.value]
114                     // #endif
115                     
116                     // #ifdef MP-WEIXIN
117                     // 在 H5 環境下 $set 會導致一級分類無法滾動， 小程式正常執行
118                      this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
119                     // #endif
120                 }
121             }
122         }
123     }
124 </script>

CSS

 1 <style lang="scss" scoped>
 2     .content {
 3         .content-box {
 4             padding: 23upx 20upx 0 20upx;
 5             .box {
 6                 padding: 25upx;
 7                 background:rgba(255,255,255,1);
 8                 border-radius:25upx;
 9                 box-shadow:0 5upx 16upx 0 rgba(20,104,255,0.07);
10                 .box-item {
11                     margin-top: 25upx;
12                     position: relative;
13                     .item-picker {
14                         width: 100%;
15                         margin-top: 10upx;
16                         height: 60upx !important;
17                         border-bottom: 2upx solid #EDEDED;
18                     }
19                 }
20             }
21         }    
22     }
23 </style>