自定义三级联动。无论三级，二级，一级基本异曲同工。
微信给我们提供了picker组件,但是限制也非常多。只能从底部弹出，省市区数据不可更改等一系列问题。
所以我们自己去做一个三级联动，微信也提供了组件picker-view来帮助我们实现
废话不多说。看效果和代码
region.png
index.wxml
<view class="index">
<view class="input" bindtap="getbox" wx:if="{{!inputShow}}" style="color: #999;">请选择地址</view>
<view class="input" bindtap="getbox" wx:if="{{inputShow}}">{{province}} {{city}} {{area}}</view>
<!-- 省市区弹框 -->
<view class="box" wx:if="{{boxShow}}">
<!-- 阴影 -->
<view class="black" bindtap="hidebox"></view>
<!-- 内容 -->
<view class="nr">
<view class="item">
<text bindtap="hidebox">取消</text>
<text bindtap="confirm">确认</text>
</view>
<view style="display:flex;width: 100%;height: 400rpx;">
<picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{pIndex}}" bindchange="changeProvince2">
<picker-view-column>
<view wx:for="{{placeArray}}" wx:key="name" style="line-height: 50rpx">{{item.name}}</view>
</picker-view-column>
</picker-view>
<picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{cIndex}}" bindchange="changeCity2">
<picker-view-column>
<view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 50rpx">{{item.name}}</view>
</picker-view-column>
</picker-view>
<picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{aIndex}}" bindchange="changeArea2">
<picker-view-column>
<view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 50rpx">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</view>
index.css
.index{
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
padding-top: 30rpx;
box-sizing: border-box;
}
.input{
width: 680rpx;
height: 80rpx;
line-height: 80rpx;
border: 1px solid #999;
border-radius: 10rpx;
margin: auto;
padding: 0 32rpx;
box-sizing: border-box;
}
.box{
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
width: 100%;
height: 100vh;
z-index: 8;
}
.black{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .5);
z-index: 10;
}
.nr{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 500rpx;
z-index: 12;
background: #FFF;
}
.item{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100rpx;
line-height: 100rpx;
padding: 0 20rpx;
box-sizing: border-box;
border-bottom: 1px solid #EEE;
}
index.js
取部分省市区数据，默认了北京-北京-东城区。如需要可修改
// 部分省市区数据
const placeArray = [
{
"name": "北京",
"city": [{
"name": "北京",
"area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
}]
},
{
"name": "天津",
"city": [
{
"name": "天津A",
"area": ["a区", "b区", "c区", "d区", "e区"]
},
{
"name": "天津B",
"area": ["1区", "2区", "3区", "4区"]
}
]
},
{
"name": "河北",
"city": [
{
"name": "石家庄",
"area": ["长安区", "新乐市", "鹿泉市"]
},
{
"name": "邯郸",
"area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉 县", "磁 县" ]
},
{
"name": "邢台",
"area": ["桥东区", "桥西区", "沙河市"]
},
]
}];
Page({
data:{
inputShow:false,
boxShow:false,
placeArray: placeArray,
province: placeArray[0].name,
pIndex: 0,
city: placeArray[0].city[0].name,
cIndex: 0,
area: placeArray[0].city[0].area[0],
aIndex: 0
},
// 展示弹框
getbox: function(){
this.setData({
boxShow: true
})
},
// 隐藏弹框
hidebox: function(){
this.setData({
boxShow: false
})
},
// 确认按钮
confirm: function(){
this.setData({
boxShow: false,
inputShow: true,
})
},
changeProvince2: function(e){
const val = e.detail.value
this.setData({
pIndex: val,
cIndex: 0,
aIndex: 0,
province: placeArray[val].name,
city: placeArray[val].city[0].name,
area: placeArray[val].city[0].area[0]
})
},
changeCity2: function(e){
const val = e.detail.value
this.setData({
cIndex: val,
aIndex: 0,
city: placeArray[this.data.pIndex].city[val].name,
area: placeArray[this.data.pIndex].city[val].area[0]
})
},
changeArea2: function(e){
const val = e.detail.value
this.setData({
aIndex: val,
area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
})
},
})
网友评论