微信小程序三级联动下拉框插件
微信中下拉选择默认只有一级，需要实现下拉三级联动效果：
wxml代码：
<view class=”item”>
<text class=”label”>选择地区</text>
<view bindtap=”areaTap”>
<text class=”area-text” wx:if=”{{value[0]>0}}”>{{pickerP}}{{pickerC}}{{pickerR}}</text>
<text class=”area-text” wx:if=”{{value[0]==0}}”>–点击选择地址–</text>
</view>
弹出层部分：
判断addressMenuIsShow 是否为true还设置是否增加show样式，从而控制下拉菜单的弹出
<view class=”picker-mask {{addressMenuIsShow ? \’show\’:\’\’}}” catchtap=”cityCancel”></view>
<view class=”picker-view {{addressMenuIsShow ? \’show\’:\’\’}}”>
<view class=”cascade_header”>
<text class=”cancel” catchtap=”cityCancel”>取消</text>
<text class=”comfirm” catchtap=”cityComfirm”>确定</text>
</view>
<picker-view class=”picker-container” bindchange=”cityChange” value=”{{value}}”>
<picker-view-column>
<view class=”picker-item”>–选择省份–</view>
<view wx:if=”{{provinces.length}}” wx:for=”{{provinces}}” class=”picker-item” wx:key=””>
{{item.item_name}}
</view>
</picker-view-column>
<picker-view-column>
<view class=”picker-item”>–选择城市–</view>
<view wx:if=”{{cities.length}}” wx:for=”{{cities}}” class=”picker-item” wx:key=””>
{{item.item_name}}
</view>
</picker-view-column>
<picker-view-column>
<view class=”picker-item”>–选择地区–</view>
<view wx:if=”{{regions.length}}” wx:for=”{{regions}}” class=”picker-item” wx:key=””>
{{item.item_name}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
样式部分：
.btn{
width: 100%;
height: 36px;
line-height: 36px;
border-radius: 4px;
“>;
color: #fff;
}
.btn.act{“>;}
.picker-view {
width: 100%;
display: flex;
“>;
flex-direction: column;
/* justify-content: center;*/
align-items: center;
position: fixed;
bottom: 0px;
left: 0px;
height:0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index:12;
}
.picker-view.show{
height:667rpx;
}
.cascade_header{
height: 0;
width: 100%;
border:solid #e5e5e5;
border-width: 1px 0;
-webkit-transition: height 0.3s;
transition: height 0.3s;
}
.picker-view.show .cascade_header{
height: 107rpx;
line-height: 107rpx;
}
.picker-item {
line-height: 34px;
margin-left: 5rpx;
margin-right: 5rpx;
text-align: center;
}
.cancel,.comfirm{
display: block;
position: absolute;
top: 0;
width: 120rpx;
height: 107rpx;
line-height: 107rpx;
font-size: 16px;
text-align: center;
color: #888;
box-sizing: border-box;
}
.comfirm{
right: 0;
color:#1aad19;
}
.picker-container{
width: 100%;
height: 560rpx;
}
.picker-mask{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
“>;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index:10;
}
.picker-mask.show{
display: block;
opacity: 0.6;
}
.area-text{font-size: 14px;}
js部分：
设置data：
data: {
userName:\’\’,
userTel:””,
carRegion: [\’京\’, \’津\’, \’冀\’, \’晋\’, \’蒙\’, \’辽\’, \’吉\’, \’黑\’, \’沪\’, \’苏\’, \’浙\’, \’皖\’, \’闽\’, \’赣\’, \’鲁\’, \’豫\’, \’鄂\’, \’湘\’, \’粤\’, \’桂\’, \’琼\’, \’川\’, \’贵\’, \’云\’, \’渝\’, \’藏\’, \’陕\’, \’甘\’, \’青\’, \’宁\’, \’新\’, \’港\’, \’澳\’,\’台\’],
index: 0,
carNum: “”,
addressMenuIsShow: false,
provinces: [],
cities: [],
regions: [],
value:[0,0,0],
pickerP: “–选择省份-“,
pickerC: “-选择城市-“,
pickerR: “-选择地区–“,
addressDetail:””
},
onLoad: function (options) {
var proList = [], citList = [], regionList = [];
var id = arealist.provinceData[0].item_code;
let citysL = arealist.cityData.length;
this.setData({
provinces: arealist.provinceData
})
},
//点击事件，点击弹出选择页
areaTap: function () {
this.setData({
addressMenuIsShow:true
})
},
cityCancel: function () {
this.setData({
addressMenuIsShow: false
})
},
cityComfirm: function (e) {
var p_index = this.data.value[0];
var c_index = this.data.value[1];
var r_index = this.data.value[2];
var p = (p_index > 0) ? this.data.provinces[p_index – 1].item_name : “–选择省份-“;
var c = (c_index > 0) ? this.data.cities[c_index – 1].item_name : “-选择城市-“;
var r = (r_index > 0) ? this.data.regions[r_index – 1].item_name : “-选择地区–“;
this.setData({
addressMenuIsShow: false,
pickerP: p,
pickerC: c,
pickerR: r
})
},
cityChange: function (e) {
var value = e.detail.value;
var provinces = this.data.provinces;
var cList = [];
var regions = [];
var provinceNum = value[0];
var cityNum = value[1];
var regionNum = value[2];
// 如果省份选择项和之前不一样，表示滑动了省份
if (this.data.value[0] != provinceNum) {
if (provinceNum > 0) {
var province_code = (arealist.provinceData[provinceNum-1].item_code).slice(0, 2);
console.log(arealist.provinceData[provinceNum – 1])
var city_reg = new RegExp(“^” + province_code + “[0-9]{2}00$”);
for (var i = 0; i < arealist.cityData.length; i++) {
if (city_reg.test(arealist.cityData[i].item_code)) {
cList.push(arealist.cityData[i])
}
}
this.setData({
value: [provinceNum, -1, -1],
cities: cList,
regions: []
})
} else {
this.setData({
value: [-1, -1, -1],
cities: [],
regions: []
})
}
} else if (this.data.value[1] != cityNum) { // 如果城市选择项和之前不一样，表示滑动了城市
if (cityNum >0) {
var city_code = this.data.cities[cityNum – 1].item_code.slice(0,4);
var city_reg = new RegExp(“^” + city_code+”[0-9]{2}$”);
for (var i = 0,l = arealist.regionData.length; i < l;i++){
if (city_reg.test(arealist.regionData[i].item_code)){
regions.push(arealist.regionData[i]);
}
}
this.setData({
value: [provinceNum, cityNum, -1],
regions: regions
})
} else {
this.setData({
value: [provinceNum, -1, -1],
regions: []
})
}
} else if (this.data.value[2] != regionNum) { // 如果城市选择项和之前不一样，表示滑动了城市
this.setData({
value: [provinceNum, cityNum, regionNum],
})
}
}
……
省市 json数据：
const provinceData = [
{“item_code”:”110000″,”item_name”:”北京市”},
{“item_code”:”120000″,”item_name”:”天津市”},
{“item_code”:”130000″,”item_name”:”河北省”},
{“item_code”:”140000″,”item_name”:”山西省”},
{“item_code”:”150000″,”item_name”:”内蒙古自治区”},
{“item_code”:”210000″,”item_name”:”辽宁省”},
{“item_code”:”220000″,”item_name”:”吉林省”},
……
]
]
const cityData = [
{“item_code”:”110100″,”item_name”:”北京市”},
{“item_code”:”120100″,”item_name”:”天津市”},
{“item_code”:”130100″,”item_name”:”石家庄市”},
{“item_code”:”130200″,”item_name”:”唐山市”},
{“item_code”:”130300″,”item_name”:”秦皇岛市”},
{“item_code”:”130400″,”item_name”:”邯郸市”},
{“item_code”:”130500″,”item_name”:”邢台市”},
{“item_code”:”130600″,”item_name”:”保定市”},
……
]
]
const regionData=[
{“item_code”:”110101″,”item_name”:”东城区”},
{“item_code”:”110102″,”item_name”:”西城区”},
{“item_code”:”110105″,”item_name”:”朝阳区”},
{“item_code”:”110106″,”item_name”:”丰台区”},
{“item_code”:”110107″,”item_name”:”石景山区”},
{“item_code”:”110108″,”item_name”:”海淀区”},
{“item_code”:”110109″,”item_name”:”门头沟区”},
……
]
module.exports = {
provinceData: provinceData,
cityData: cityData,
regionData: regionData
}
版权声明：本文为crystal2018原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。