省市区三级联动

代码实现效果如图

wxml代码：

<view wx:if="{{showLocation==1}}" class="location-bottom" style="height:{{windowHeight}}">

<view class="init">

<view class="top center">

<text>收货地区</text>

<image class="top-image" src="../Images/delPng.png" bindtap='hideAddr'></image>

</view>

<view class="middle">

<picker-view indicator-style="height: 50px;" style="float:left;width:33%; height: 300rpx;" bindchange='chooseProvince' value="{{provinceValue}}">

<picker-view-column>

<view style="line-height: 50px;font-size:32rpx;" class="center">请选择</view>

<block wx:for="{{provinceList}}" wx:for-item="items" wx:key="{{index}}">

<view style="line-height: 50px;font-size:32rpx;" class="center">{{items.region_name}}</view>

</block>

</picker-view-column>

</picker-view>

 

<picker-view indicator-style="height: 50px;" style="float:left;width:33%; height: 300rpx;" bindchange='chooseCity' value="{{cityValue}}">

<picker-view-column>

<view style="line-height: 50px;font-size:32rpx" class="center">请选择</view>

<block wx:for="{{cityList}}" wx:for-item="items" wx:key="{{index}}">

<view style="line-height: 50px;font-size:32rpx" class="center">{{items.region_name}}</view>

</block>

</picker-view-column>

</picker-view>

 

<picker-view indicator-style="height: 50px;" style="float:left;width:33%; height: 300rpx;" bindchange='chooseDistrict' value="{{districtValue}}">

<picker-view-column>

<view style="line-height: 50px;font-size:32rpx" class="center">请选择</view>

<block wx:for="{{districtList}}" wx:for-item="items" wx:key="{{index}}">

<view style="line-height: 50px;font-size:32rpx" class="center">{{items.region_name}}</view>

</block>

</picker-view-column>

</picker-view>

</view>

<view class="bottom center">

<view class="btn center" bindtap='confirmLocation'>

<text>完成</text>

</view>

</view>

</view>

</view>

 

css代码：

.location-bottom{

width:100%;background: rgba(0, 0, 0, 0.7);position: absolute;top:0;left:0;z-index:99

}

 

.location-bottom .init{

position:absolute;left:0;bottom:0rpx;height:600rpx;background: white;width:100%;

}

 

.location-bottom .init .top{

width:100%;height:150rpx;border-bottom: 2rpx solid lightgray;position:relative;

}

 

.location-bottom .init .top text{

color:rgba(51, 51, 51, 1);font-size: 36rpx;

}

 

.location-bottom .init .top .top-image{

width:25rpx;height:25rpx;position: absolute;top:52rpx;right:52rpx;

}

 

.location-bottom .init .middle{

width:100%;height:300rpx;overflow: hidden;

}

 

.location-bottom .init .bottom{

width:100%;height:150rpx;border-top:2rpx solid lightgray;

}

 

.location-bottom .init .bottom .btn{

width:320rpx;height:72rpx;background: rgba(255, 137, 158, 1);border-radius: 36rpx;

}

 

.location-bottom .init .bottom .btn text{

color:white;font-size:32rpx;

}

js代码：js代码见码云