关于自定义省市区选择 其实也是用了 uniApp的内置组件 picker
<picker mode="multiSelector" @change="bindRegionChange"
@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray"><view class='acea-row'><view class="picker line1">{{region[0]}}，{{region[1]}}，{{region[2]}}</view><view class='iconfont icon-xiangyou abs_right'></view></view></picker>data(){return{region: ['省', '市', '区'],valueRegion: [0, 0, 0],district: [],multiArray: [],multiIndex: [0, 0, 0],cityId: 0,}
},
methods:{// 获取地址数据getCityList: function() {let that = this;getCity().then(res => {this.district = res.data;let oneDay = 24 * 3600 * 1000;//设置不过期时间的方法 可以换成uni.setStorageSync('xx',xx)this.$Cache.setItem({name:'cityList',value:res.data,expires:oneDay * 7}); //设置七天过期时间that.initialize();})},initialize: function() {let that = this,province = [],city = [],area = [];if (that.district.length) {let cityChildren = that.district[0].child || [];let areaChildren = cityChildren.length ? (cityChildren[0].child || []) : [];that.district.forEach(function(item) {province.push(item.name);});cityChildren.forEach(function(item) {city.push(item.name);});areaChildren.forEach(function(item) {area.push(item.name);});this.multiArray = [province, city, area]}},bindRegionChange: function(e) {let multiIndex = this.multiIndex,province = this.district[multiIndex[0]] || {child: []},city = province.child[multiIndex[1]] || {cityId: 0},multiArray = this.multiArray,value = e.detail.value;this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]this.cityId = city.cityIdthis.valueRegion = [0, 0, 0]this.initialize();},bindMultiPickerColumnChange: function(e) {let that = this,column = e.detail.column,value = e.detail.value,currentCity = this.district[value] || {child: []},multiArray = that.multiArray,multiIndex = that.multiIndex;multiIndex[column] = value;switch (column) {case 0:let areaList = currentCity.child[0] || {child: []};multiArray[1] = currentCity.child.map((item) => {return item.name;});multiArray[2] = areaList.child.map((item) => {return item.name;});break;case 1:let cityList = that.district[multiIndex[0]].child[multiIndex[1]].child || [];multiArray[2] = cityList.map((item) => {return item.name;});break;case 2:break;}// #ifdef MP || APP-PLUSthis.$set(this.multiArray, 0, multiArray[0]);this.$set(this.multiArray, 1, multiArray[1]);this.$set(this.multiArray, 2, multiArray[2]);// #endif// #ifdef H5this.multiArray = multiArray;// #endifthis.multiIndex = multiIndex// this.setData({ multiArray: multiArray, multiIndex: multiIndex});},
}
)
