直接上代码
<view class="" @touchmove.stop.prevent="preventTouchMove">
<picker-view class="address-picker-box" :indicator-style="indicatorStyle" :value="pcaIndex"
@change="bindChange">
<picker-view-column class="center">
<div class="address-picker-item center" v-for="(item,index) in provinceList" :key="index">
<text class="address-picker-item-text">{{item.shortName}}</text>
</div>
</picker-view-column>
<picker-view-column>
<div class="address-picker-item center" v-for="(item,index) in provinceList[pcaIndex[0]].children"
:key="index">
<text class="address-picker-item-text">{{item.shortName}}</text>
</div>
</picker-view-column>
<picker-view-column>
<div class="address-picker-item center"
v-for="(item,index) in provinceList[pcaIndex[0]].children[pcaIndex[1]].children" :key="index">
<text class="address-picker-item-text">{{item.shortName}}</text>
</div>
</picker-view-column>
</picker-view>
</view>
城市格式
[
{
children:[
children:[
{
shortName:'东城''
},
....
]
shortName:'北京''
]
shortName:'北京''
}
]
格式就是嵌套
jsd代码
data(){
return {
provinceList: uni.getStorageSync('cityData'), // 省列表一定要提前去获取数据,可以在上个页面本地缓存,
pcaIndex: [0, 0, 0],//这个可以设置会填的数据,根据索引,
}
},
methods:{
//监听
bindChange(e) {
let currentIndex = e.detail.value;
if (currentIndex[0] != this.pcaIndex[0]) {
this.pcaIndex.splice(0, 3, currentIndex[0], 0, 0);
return;
}
if (currentIndex[1] != this.pcaIndex[1]) {
this.pcaIndex.splice(1, 2, currentIndex[1], 0);
return;
}
if (currentIndex[2] != this.pcaIndex[2]) {
this.pcaIndex.splice(2, 1, currentIndex[2]);
return;
}
},
}
《程序员》曾陪伴了无数开发者成长。《新程序员》全新归来，推荐给大家！
里面东西不太全,不懂得,可以私信我
