微信小程序省市区三级联动（自定义数据版）可扩展为二级联动
2019-12-23 本文已影响0人
人类进化又没带我
刚有老哥问为啥iPhone 11 不支持省市区三级联动，然后让老哥提供了个代码片段。我用iPhone X看了下 也跑不起来啊。看了下代码逻辑，只有一个省，只写了一个picker-view-column，这搞个啥三级联动。。。然后老哥说了是抠了一部分代码出来的。既然有问题，那我们还是那句话，有需求，然后能搞出来的，咱就花点时间去搞。
然后给老哥实现了该功能，社区可能有其他的方案了，但是再分享下吧，给有需要的童鞋。
效果图：
效果图.gif
额，这个视频转GIF因为社区上传不了大图，所以剪了一部分，具体的效果还是直接工具打开代码片段预览吧～
上代码
wxml：
<view class="address-item" bindtap="pickAddress">
<view class="item-title">所在地区</view>
<view class="item-content arrow {{region ? '' : 'item-content_shadow' }}">{{region||"请选择"}}</view>
</view>
<pop-up visible="{{visible}}" onClose="closePopUp">
<view slot="content">
<view class="picker-view">
<view class="picker-view__pane">
<text catchtap="cityCancel">取消</text>
<text catchtap="citySure">确定</text>
</view>
<picker-view class="pick-view__group" bindchange="cityChange" value="{{value}}" wx:key="*this">
<picker-view-column indicator-class="item_active">
<view wx:for="{{provinces}}" class="picker-item" wx:key="idnex">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{citys}}" class="picker-item" wx:key="">{{item.name}}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{areas}}" class="picker-item" wx:key="">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</pop-up>
这里有封装一个自定义组件pop-up，是从下往上弹出的的一个效果，已放到代码片段里了，自行查看即可～
接下来是wxss
.address-item {
min-height: 98rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #f1f1f1;
}
.item-title {
width: 203rpx;
color: #4d4c4c;
font-size: 28rpx;
height: 98rpx;
line-height: 98rpx;
}
.item-content {
width: 520rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 28rpx;
height: 98rpx;
line-height: 98rpx;
color: #4d4c4c;
}
/* 地区级联选择器 */
.picker-view {
width: 100%;
display: flex;
background-color: #fff;
flex-direction: column;
justify-content: center;
align-items: center;
bottom: 0rpx;
left: 0rpx;
}
.picker-item {
line-height: 70rpx;
margin-left: 5rpx;
margin-right: 5rpx;
text-align: center;
}
.picker-view__pane {
height: 100rpx;
width: 100%;
padding: 20rpx 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.picker-view__pane text{
color: red;
font-size: 30rpx;
}
.pick-view__group {
width: 96%;
height: 450rpx;
}
呐，接下来还是重点的js处理。
首先我在本地定义了一个city.js，网上下载的。主要是省市区的数据
var provinces = [{
"name": "北京市",
"id": "110000"
}, {
"name": "天津市",
"id": "120000"
}, {
"name": "河北省",
"id": "130000"
}, {
"name": "山西省",
"id": "140000"
}, {
"name": "内蒙古自治区",
"id": "150000"
}, {
"name": "辽宁省",
"id": "210000"
}]
就不放太多了，具体的可以在代码片段里查看，大家可以自定义数据的id，贴合自己的业务场景。
然后是页面js处理
var app = getApp()
var address = require('./city.js')
var app = getApp()
Page({
data: {
address: '', //详细收货地址（四级）
value: [0, 0, 0], // 地址选择器省市区 暂存 currentIndex
region: '', //所在地区
regionValue: [0, 0, 0], // 地址选择器省市区 最终 currentIndex
provinces: [], // 一级地址
citys: [], // 二级地址
areas: [], // 三级地址
visible: false
},
onLoad(options) {
// 默认联动显示北京
var id = address.provinces[0].id
this.setData({
provinces: address.provinces,
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id]
})
},
// 提交时由序号获取省市区id
getRegionId(type) {
let value = this.data.regionValue
let provinceId = address.provinces[value[0]].id
let townId = address.citys[provinceId][value[1]].id
let areaId
if (address.areas.length > 0) {
areaId = address.areas[townId][value[2]].id
} else {
areaId = 0
}
if (type === 'provinceId') {
return provinceId
} else if (type === 'townId') {
return townId
} else {
return areaId
}
},
closePopUp() {
this.setData({
visible: false
})
},
pickAddress() {
this.setData({
visible: true,
value: [...this.data.regionValue]
})
},
// 处理省市县联动逻辑 并保存 value
cityChange(e) {
var value = e.detail.value
let {
provinces,
citys
} = this.data
var provinceNum = value[0]
var cityNum = value[1]
var areaNum = value[2]
if (this.data.value[0] !== provinceNum) {
var id = provinces[provinceNum].id
this.setData({
value: [provinceNum, 0, 0],
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id]
})
} else if (this.data.value[1] != cityNum) {
var id = citys[cityNum].id
this.setData({
value: [provinceNum, cityNum, 0],
areas: address.areas[citys[cityNum].id]
})
} else {
this.setData({
value: [provinceNum, cityNum, areaNum]
})
}
},
// 点击地区选择取消按钮
cityCancel(e) {
this.setData({
visible: false
})
},
// 点击地区选择确定按钮
citySure(e) {
var value = this.data.value
this.setData({
visible: false
})
// 将选择的城市信息显示到输入框
try {
var region =
(this.data.provinces[value[0]].name || '') +
(this.data.citys[value[1]].name || '')
if (this.data.areas.length > 0) {
region = region + this.data.areas[value[2]].name || ''
} else {
this.data.value[2] = 0
}
} catch (error) {
console.log('adress select something error')
}
this.setData({
region: region,
regionValue: [...this.data.value]
})
}
})
