微信小程序三级联动下拉框插件

微信中下拉选择默认只有一级，需要实现下拉三级联动效果：

wxml代码：

<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>

<picker-view class="picker-container" bindchange="cityChange" value="{{value}}">

　　<picker-view-column>

　　　　　　</view>

　　</picker-view-column>

<picker-view-column>

</view>

</picker-view-column>

　　<picker-view-column>

　　　　</view>

　　</picker-view-column>

</picker-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

}

posted @ 2018-03-21 15:30 crystal2018 阅读(1133) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

crystal2018

微信小程序三级联动下拉框插件

公告