小程序picker地区级联选择的问题及解决方案

各种系统中行政区域选择的场景不少，我们也有不少这样的场景。本想使用第三方的组件，但是大多有些小问题，不能满足需要。后面使用picker的mulitSelector模式写了一个，发现这种列模式的体验并好，最后仿京东模式自定义了一个。

一、造轮子的原因

1.1 数据要自定义

微信官方的picker的region模式使用的是标准的国家行政区域数据，而我们的场景有一些自设的区域要加入；也不可以自定久选择级数，只能选到县/区级。

1.2 picker的兼容性并不好。

uni-app的picker组件，在小程序模式是使用各自的picker，H5则是uni-app自的picker组件。所以在各平台中还是有差异的，在我们测试中微信的picker的mulitSelector模式，在列级联滑动中如果出现两次列数组值length不一致时，后绑定的选定索引时会无效，会自动致为0，且后续触发的change事件则仍是绑定索引，而在H5时不会。

1.3 picker是不适合异步加载数据

级联就是要简便的控制后续列的变化，如1.2所示，绑定索引bug。而如果数据是异步加载，则更难于控制加载状态，特别是滑动过快网络不佳时，很容易出现数据混乱。

1.4 picker作级联，不如京东级联模式的体验好效率高。

如图所示

 二、上代码

使用的了tui-drawer 、tui-loadmore等tui-xxx为uni-app第三方组件，具本使用参考官方文档，或使用别的组件替代。regionApi为行政区域节点异步加载封装，可根自己数据自行封装。

  1 <!--
  2 * 行政区域选择器
  3 *
  4 * @alphaiar
  5 * 20210408 created.
  6  -->
  7
  8 <template>
  9     <view class="region-picker">
 10         <input placeholder-class="placeholder" :placeholder="placeholder" :value="selectorPath" disabled
 11             @tap="onPopupToggle" />
 12         <view v-if="errorMessage" class="messager">{{errorMessage}}</view>
 13         <tui-drawer :visible="visibled" mode="bottom" @close="onPopupToggle">
 14             <view class="header">
 15                 <text class="cancel" @tap="onPopupToggle">取消</text>
 16                 <text class="confirm" @tap="onConfirm">确认</text>
 17             </view>
 18             <view class="tab-wrapper">
 19                 <template v-for="(lab,idx) in labels">
 20                     <label v-if="idx!==labelIndex" :key="idx" @tap="onLabelChange({index:idx})">
 21                         {{lab}}
 22                     </label>
 23                     <template v-else>
 24                         <label class="active">
 25                             {{lab}}
 26                         </label>
 27                         <iconfont class="indicator" name="arrow-down" />
 28                     </template>
 29                 </template>
 30             </view>
 31             <tui-loadmore v-if="loading" :index="3" type="primary" text="加载中..." />
 32             <view v-else class="region-view">
 33                 <template v-for="(n,idx) in regions">
 34                     <label v-if="idx !== selectorIndexs[labelIndex]" @tap="onSelector(idx)" :key="idx">{{n}}</label>
 35                     <label v-else :key="idx">
 36                         <span class="selected">{{n}}</span>
 37                     </label>
 38                 </template>
 39             </view>
 40             <view v-if="errorTips" class="error-tips">
 41                 {{errorTips}}
 42             </view>
 43         </tui-drawer>
 44     </view>
 45 </template>
 46
 47 <script>
 48     import utils from "../utils/utils.js";
 49     import regionApi from "../apis/region.js";
 50
 51     export default {
 52         name: 'regionPicker',
 53         props: {
 54             /**
 55              * 选择器区级
 56              * 0-省
 57              * 1-地市
 58              * 2-县区
 59              * 3-乡镇
 60              */
 61             selectorLevel: {
 62                 type: Number,
 63                 default: 1,
 64                 validator(val) {
 65                     return [0, 1, 2, 3].some(x => x === val);
 66                 }
 67             },
 68             /**
 69              * 当前选择值
 70              */
 71             value: {
 72                 type: Array,
 73                 default: null
 74             },
 75             /**
 76              * 没有值时的占位符
 77              */
 78             placeholder: {
 79                 type: String,
 80                 default: '请选择地区'
 81             },
 82             /**
 83              * 表单验证错误提示消息
 84              */
 85             errorMessage: {
 86                 type: String,
 87                 default: null
 88             }
 89         },
 90         watch: {
 91             selectorLevel(val) {
 92                 this.$emit('input', null);
 93                 this.initialize();
 94             },
 95             value(val) {
 96                 this.initialize();
 97             }
 98         },
 99         data() {
100
101             return {
102                 visibled: false,
103                 loading: false,
104                 labels: ['请选择'],
105                 labelIndex: 0,
106                 regions: [],
107                 selectorIndexs: [],
108                 selectorNodes: [],
109                 errorTips: null
110             };
111         },
112         computed: {
113             selectorPath() {
114                 let nodes = this.selectorNodes;
115
116                 if (!nodes || nodes.length < 1)
117                     return null;
118
119                 let paths = nodes.map(x => x.name);
120                 let path = paths.join(' / ');
121
122                 return path;
123             }
124         },
125         mounted() {
126             const self = this;
127             regionApi.getNodes({
128                 params: {
129                     endCategory: 1
130                 },
131                 loading: false,
132                 onLoading(ld) {
133                     self.loading = ld;
134                 },
135                 showError: true,
136                 callback(fkb) {
137
138                     if (!fkb.success)
139                         return;
140
141                     let nodes = fkb.result;
142                     self.__rawRegions = nodes;
143
144                     if (!self.value || self.value.length < 1)
145                         self.bindViews(nodes);
146                     else
147                         self.initialize();
148                 }
149             });
150
151         },
152         methods: {
153             /**
154              * 初始化选择器
155              */
156             initialize() {
157                 this.labels = ['请选择'];
158                 this.labelIndex = 0;
159                 this.selectorIndexs = [];
160                 this.selectorNodes = [];
161                 this.bindViews(this.__rawRegions);
162
163                 //设定初始值
164                 let values = this.value;
165                 if (!values || values.length < 1)
166                     return;
167
168                 const self = this;
169                 let prevs = this.__rawRegions;
170                 let setValue = function(idx) {
171                     let nd = values[idx];
172                     let about = false;
173                     let exists = prevs.some((x, i) => {
174                         if (nd.name !== x.name && nd.code !== x.code)
175                             return false;
176
177                         prevs = x.children || prevs;
178
179                         //如果还有下级，但又未加载子节点，则先加载再来设定
180                         if (!x.children && idx + 1 < values.length) {
181                             self.getNextRegions(x, () => {
182                                 setValue(idx);
183                             });
184                             about = true;
185                             return true;
186                         }
187
188                         self.selectorNodes.push({
189                             category: x.category,
190                             code: x.code,
191                             name: x.name
192                         });
193                         self.onSelector(i);
194                         return true;
195                     });
196
197                     if (about)
198                         return;
199
200                     if (exists && idx + 1 < values.length)
201                         setValue(idx + 1);
202                 };
203
204                 setValue(0);
205             },
206             /**
207              * 将待选节点绑定至待选视图
208              *
209              * @param {Array} nodes 要绑定的原始节点
210              */
211             bindViews(nodes) {
212                 this.regions = nodes.map(x => x.name);
213             },
214             /**
215              * 获取下级节点
216              *
217              * @param {Object} prevNode 上级选中的节点
218              * @param {function} cb 加载完成后回调
219              */
220             getNextRegions(prevNode, cb) {
221                 const self = this;
222                 regionApi.getChildren({
223                     params: {
224                         category: prevNode.category + 1,
225                         prevCode: prevNode.code
226                     },
227                     loading: false,
228                     onLoading(ld) {
229                         self.loading = ld;
230                     },
231                     showError: true,
232                     callback(fkb) {
233                         if (!fkb.success)
234                             return;
235
236                         prevNode.children = fkb.result;
237                         if (!cb)
238                             self.bindViews(fkb.result);
239                         else
240                             cb();
241                     }
242                 });
243             },
244             /**
245              * 获取指定列选择的节点
246              *
247              * @param {Object} level 地区级别0-3
248              */
249             getSelectorNode(level) {
250                 let prevs = this.__rawRegions;
251
252                 for (let i = 0; i < level; i++) {
253
254                     let sidx = this.selectorIndexs[i];
255                     if (!sidx)
256                         return null;
257
258                     prevs = prevs[sidx].children;
259                     if (!prevs)
260                         return null;
261                 }
262
263                 let cval = this.selectorIndexs[level];
264                 let node = prevs[cval];
265
266                 return node;
267             },
268             /**
269              * 切下至下一级区域选择
270              *
271              * @param {Object} current 当前选中级别0-3
272              */
273             moveNextLevel(current) {
274                 let node = this.getSelectorNode(current);
275                 if (node == null)
276                     return;
277
278                 if (node.children)
279                     this.bindViews(node.children);
280                 else
281                     this.getNextRegions(node);
282             },
283             onPopupToggle(e) {
284                 this.visibled = !this.visibled;
285             },
286             onConfirm(e) {
287                 if (this.selectorLevel + 1 > this.selectorIndexs.length) {
288                     this.errorTips = '*请将地区选择完整。';
289                     return;
290                 }
291
292                 let nodes = [];
293                 for (let i = 0; i < this.selectorIndexs.length; i++) {
294                     let node = this.getSelectorNode(i);
295                     nodes.push({
296                         category: node.category,
297                         code: node.code,
298                         name: node.name
299                     });
300                 }
301
302                 this.selectorNodes = nodes;
303                 this.onPopupToggle();
304
305                 this.$emit('input', nodes);
306                 this.$emit('change', nodes);
307             },
308             onLabelChange(e) {
309                 //加载中，禁止切换
310                 if (this.loading)
311                     return;
312
313                 let idx = e.index;
314                 this.labelIndex = idx;
315                 if (idx > 0)
316                     this.moveNextLevel(idx - 1);
317                 else
318                     this.bindViews(this.__rawRegions);
319             },
320             onSelector(idx) {
321
322                 this.errorTips = null;
323                 let labIdx = this.labelIndex;
324
325                 //由于uni 对于数组的值监听不完善，只有复制数组更新才生效
326                 let labs = utils.clone(this.labels);
327                 labs[labIdx] = this.regions[idx];
328                 this.labels = labs;
329
330                 //原因上同
331                 let idexs = utils.clone(this.selectorIndexs);
332                 if (idexs.length <= labIdx)
333                     idexs.push(idx);
334                 else
335                     idexs[labIdx] = idx;
336                 this.selectorIndexs = idexs;
337
338                 //有下级，全清空
339                 if (labIdx >= this.selectorLevel)
340                     return;
341
342                 this.selectorIndexs.splice(labIdx + 1, 4); //最大只有4级
343                 this.labels.splice(labIdx + 1, 4); //最大只有4级
344
345                 this.labels.push('请选择');
346                 this.labelIndex = labIdx + 1;
347                 this.moveNextLevel(labIdx);
348             }
349         }
350     }
351 </script>
352
353 <style lang="scss">
354     .region-picker {
355
356         .header {
357             width: 100%;
358             box-sizing: border-box;
359             margin: 7.2463rpx 0;
360             line-height: $uni-font-size-base+ 7.2463rpx;
361
362             .cancel {
363                 padding: 0 18.1159rpx;
364                 float: left;
365                 //color: $uni-text-color-grey;
366             }
367
368             .confirm {
369                 padding: 0 18.1159rpx;
370                 float: right;
371                 color: $uni-color-primary;
372             }
373
374             text:hover {
375                 background-color: $uni-bg-color-hover;
376             }
377         }
378
379         .tab-wrapper {
380             width: 100%;
381             margin-bottom: 28.9855rpx;
382             display: flex;
383             justify-content: center;
384             box-sizing: border-box;
385
386             label {
387                 margin: 7.2463rpx 28.9855rpx;
388                 padding: 7.2463rpx 0;
389                 color: $uni-text-color;
390                 border-bottom: solid 3.6231rpx transparent;
391             }
392
393             .active {
394                 color: $uni-color-primary;
395                 border-color: $uni-color-primary;
396             }
397
398             .indicator {
399                 margin-left: -10px;
400                 margin-top: 6px;
401                 color: $uni-color-primary;
402             }
403         }
404
405         .region-view {
406             width: 100%;
407             display: flex;
408             flex-wrap: wrap;
409             padding: 7.2463rpx 14.4927rpx 28.9855rpx 14.4927rpx;
410             box-sizing: border-box;
411
412             label {
413                 margin: 7.2463rpx 0;
414                 width: 33%;
415                 text-align: center;
416                 color: $uni-text-color-grey;
417                 text-overflow: ellipsis;
418                 overflow: hidden;
419             }
420
421             .selected {
422                 padding: 3.6231rpx 14.4927rpx;
423                 background-color: $uni-color-light-primary;
424                 color: #FFF;
425                 border-radius: 10.8695rpx;
426             }
427         }
428
429         .error-tips {
430             width: 100%;
431             height: auto;
432             padding-bottom: 21.7391rpx;
433             text-align: center;
434             color: $uni-color-error;
435             font-size: $uni-font-size-sm;
436         }
437     }
438 </style>

Region Picker

行政区化节点数据，来源国家统计局，到县区级。

https://files.cnblogs.com/files/blogs/677104/cn_regions.json

最终效果