小程序中自定义省市区三级联动，小程序提供了原生的省市区选择器：mode = region
但是这次项目中使用的是后台的省市区数据，所以需要自定义选择器。使用到的是 mode = multiSelector 多列选择器。
HTML：
<picker mode="multiSelector" range="{{multiArray}}" bindcolumnchange="columnchange" value="{{multiIndex}}" bindchange='pickchange'>
<view class='right' wx:if="{{step == 0}}">
<text>请选择</text>
</view>
<view class="picker" wx:if="{{step == 1}}">
<view>{{multiArray[0][multiIndex[0]]}}</view>-<view>{{multiArray[1][multiIndex[1]]}}</view>-<view>{{multiArray[2][multiIndex[2]]}}</view>
</view>
</picker>
其中step是为了判断当前是否选择
其中data数据
data: {
multiArray: [], // 三维数组数据
multiIndex: [0, 0, 0], // 默认的下标
step: 0, // 默认显示请选择
}
JS获取省，并在 onLoad 中调用：
getProvince() { // 获取省
wx.showLoading({
title: '加载中',
})
var that = this;
wx.request({
url: 'xxx?type=province', // 仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
wx.hideLoading()
var data = res.data
var provinceList = [...data] // 放在一个数组里面，在数组前边添加一个清空选项
provinceList.unshift({
Id: "",
Code: "",
Name: "全部省份",
ParentId: "",
Type: "",
})
var provinceArr = data.map((item) => { return item.Name }) // 获取数据里面的value值，就是只用数据的名称用于页面展示
provinceArr.unshift("全部省份") // 在页面展示用的也需要添加一个清空项
that.setData({
multiArray: [provinceArr, ["全部市"], ["全部区"]], // 更新三维数组 更新后长这样 [['全部省', '北京省',......],["全部市"],["全部区"]]
provinceList, // 省级原始数据
provinceArr, // 省级所有的名称用于页面展示
pCode: provinceList[0].Code // 用于查询收费站点的查询code，添加清空项后不需要该操作，都可
})
var defaultId = that.data.provinceList[0].Id // 使用第一项当作参数获取市级数据，添加清空项后不需要该操作，都可
if (defaultId) {
that.setData({
currnetCityQueryId: defaultId // 保存市的查询id，用于后边的查询市操作
})
that.getCity(defaultId) // 获取市级数据
}
}
})
},
市和区域获取省相同，分别不同赋值即可。
getCity(id) { // 获取市级数据
this.setData({
currnetCityQueryId: id // 保存当前选择的市级id
})
var that = this;
wx.request({
url: 'xxx?type=city&parentId=' + that.data.currnetCityQueryId, // 仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
var data = res.data
var cityList = [...data]
cityList.unshift({
Id: "",
Code: "",
Name: "全部市",
ParentId: "",
Type: "",
})
var cityArr = data.map((item) => { return item.Name })
cityArr.unshift("全部市")
that.setData({
multiArray: [that.data.provinceArr, cityArr, ["全部区"]], // 更新三维数组 更新后长这样 [['全部省', '北京省',......],["全部市","北京市"],["全部区"]]
cityList, // 保存下市级原始数据
cityArr, // 市级所有的名称
cityCode: cityList[0].Code // 用于查询收费站点的查询code，添加清空项后不需要该操作，都可
})
var defaultId = that.data.cityList[0].Id // 用第一个获取门店数据，添加清空项后不需要该操作，都可
if (defaultId) {
that.setData({
currnetAreaQueryId: defaultId // 保存区的查询id，用于后边的查询区操作
})
that.getArea(defaultId) // 获取区数据
}
}
})
},
getArea(id) {
this.setData({
currnetAreaQueryId: id // 更新当前选择的市级id
})
var that = this;
wx.request({
url: 'xxx?type=area&parentId=' + that.data.currnetAreaQueryId, // 仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
var data = res.data
var areaList = [...data]
areaList.unshift({
Id: "",
Code: "",
Name: "全部区",
ParentId: "",
Type: "",
})
var areaArr = data.map((item) => { return item.Name })
areaArr.unshift("全部区")
that.setData({
multiArray: [that.data.provinceArr, that.data.cityArr, areaArr], // 重新赋值三级数组 此时的数组大概是这样 [['全部省', '北京省',......],["全部市","北京市"],["全部区","朝阳区","海淀区"......]]
areaList, // 保存区原始数据
areaArr, // 保存区名称
adCode: areaList[0].Code // 用于查询收费站点的查询code
})
}
})
},
接下来便是定义多列选择器的滚动事件了
columnchange(e) { // 滚动选择器 触发的事件
// console.log(e)
var column = e.detail.column // 当前改变的列
var data = {
multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)),
multiArray: JSON.parse(JSON.stringify(this.data.multiArray))
}
data.multiIndex[column] = e.detail.value; // 第几列改变了就是对应multiIndex的第几个，更新它
switch (column) { // 处理不同的逻辑
case 0: // 第一列更改 就是省级的更改
var currnetCityQueryId = this.data.provinceList[e.detail.value].Id
if (e.detail.value !== 0) { // 判断当前的value值是不是真正的更新了
if (this.data.provinceList[e.detail.value].Id){ // 当前的市的查询id
this.getCity(currnetCityQueryId) // 获取当前市的查询id下面的市级数据
}
this.setData({
pCode: this.data.provinceList[e.detail.value].Code, // 获取当前选择项的站点查询code
cityCode: "",
adCode: ""
})
} else {
this.getProvince() // 重新调用获取省数据，以清空市和区的列表
this.setData({
multiArray: [this.data.provinceArr, [], []],
pCode: this.data.provinceList[e.detail.value].Code, // 获取当前选择项的站点查询code
cityCode: "",
adCode: ""
})
}
data.multiIndex[1] = 0 // 将市默认选择第一个
break;
case 1: // 市发生变化
var currnetAreaQueryId = this.data.cityList[e.detail.value].Id
if (e.detail.value !== 0) { // 同样判断
if (this.data.cityList[e.detail.value].Id){
this.getArea(currnetAreaQueryId) // 获取区
}
this.setData({
cityCode: this.data.cityList[e.detail.value].Code, // 获取当前选择项的站点查询code
adCode: ""
})
} else {
this.getCity(this.data.currnetCityQueryId) // 使用当前省列表中获取到的市列表查询id重新调用，以更新（置空）区的列表
this.setData({
multiArray: [this.data.provinceArr, [], []],
cityCode: this.data.cityList[e.detail.value].Code, // 获取当前选择项的站点查询code
adCode: ""
})
}
data.multiIndex[2] = 0 // 门店默认为第一个
break;
case 2:
this.setData({
adCode: this.data.areaList[e.detail.value].Code // 获取当前选择项的站点查询code
})
}
this.setData(data) // 更新数据
},
选择事件
pickchange(e) {
this.setData({
step: 1, // 有数据时显示当前已选择的省市区
multiIndex: e.detail.value // 更新下标字段
})
},
网友评论