（转）个微信小程序的省市区选择器

最终效果

思维导图

思维导图

主要代码

组件 region-picker.js

/* region-picker.js */
import area from '本地 json 数据';
Component({ properties: { showRegion: { type: Boolean, observer: function(newVal, oldVal) { this.setData({ dialog: newVal, }); }, }, regionValue: { type: Array, value: [], observer: function(newVal, oldVal) { if (newVal.length > 0) { let select = -1; for (let i = newVal.length - 1; i >= 0; i--) { if (newVal[i].id !== '') { select = i; break; } } // 除最低级别区(select = 2)以外，需要获取当前级别下一级的数据 this.setData({ ['region.tabs']: newVal, ['region.select']: select < 2 ? select+1 : select, }, () => { this.setData({ area: this.getChildArea(select < 2 ? select+1 : select), }); }); } }, }, }, data: { dialog: false, area: area, region: { tabs: [ { name: '请选择', id: '', }, { name: '请选择', id: '', }, { name: '请选择', id: '', }, ], select: 0, }, }, methods: { // 关闭 picker 触发的方法 emitHideRegion: function() { if (this.data.region.tabs[2].id === '') { wx.showToast({ title: '请选择所在地', icon: 'none', duration: 2000, }); return false; } let myEventDetail = {}; // detail对象，提供给事件监听函数 let myEventOption = {