wepy开发小程序实战之自定义地区选择器
小程序提供的地区选择器很方便 但是有时候我们需要自定义我们自己的业务逻辑,这个时候,就需要我们自己去写地区选择器
小程序地区选择器如下
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
只适合文字展示,但是如果需要根据地区id,去跑后台数据 明显不够,
下面是本人自己写的地区选择器 只展示二级 因为业务只需要展示二级。
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiCnAreaIndex}}" range="{{multiCnAreaArray}}" range-key="title">
<view class="picker">
<text>{{multiCnAreaArray[1][multiCnAreaIndex[1]].title}}</text>
<text class="icon-triangledownfill"></text>
</view>
</picker>
后台取地区数据
数据结构如下:
"data": [
{
"id": "1",
"parentId": "0",
"title": "北京市",
"areaLevel": 0,
"area2TreeInfos": [
{
"id": "2",
"parentId": "1",
"title": "直辖区",
"areaLevel": 1
}
]
},
{
"id": "7509",
"parentId": "0",
"title": "天津市",
"areaLevel": 0,
"area2TreeInfos": [
{
"id": "7510",
"parentId": "7509",
"title": "直辖区",
"areaLevel": 1
}
]
}
]
js实现代码:
methods = {
//地区选择 点击确定 改变携带值
bindMultiPickerChange(e) {
console.log('zone.wpy bindMultiPickerChange..e.detail.value' + e.detail.value);
let that = this;
that.multiCnAreaIndex = e.detail.value;
console.log('zone.wpy bindMultiPickerChange..that.multiCnAreaIndex' + that.multiCnAreaIndex);
that.$apply();
},
//地区选择 选择地区
bindMultiPickerColumnChange(e) {
console.log('zone.wpy bindMultiPickerChange..e.detail.value' + e.detail.value);
let that = this;
let data = {
multiCnAreaArray: that.multiCnAreaArray,
multiCnAreaIndex: that.multiCnAreaIndex
}
console.log('zone.wpy bindMultiPickerChange.. let data' + data);
//更新滑动的第几列e.detail.column的数组下标值e.detail.value
console.log('zone.wpy bindMultiPickerChange.. e.detail.column' + e.detail.column);
data.multiCnAreaIndex[e.detail.column] = e.detail.value;
//如果更新的是第一列“省”,第二列“市”数组下标置为0
if (e.detail.column == 0) {
data.multiCnAreaIndex = [e.detail.value, 0];
} else if (e.detail.column == 1) {
//如果更新的是第二列“市”,第一列“省”的下标不变
data.multiCnAreaIndex = [data.multiCnAreaIndex[0], e.detail.value];
}
if (that.cnArea) {
let temp = that.cnArea;
console.log('zone.wpy bindMultiPickerChange.. let temp' + temp);
data.multiCnAreaArray[0] = temp;
if ((temp[data.multiCnAreaIndex[0]].area2TreeInfos).length > 0) {
//如果第二列“市”的个数大于0,通过multiCnAreaIndex变更multiCnAreaArray[1]的值
data.multiCnAreaArray[1] = temp[data.multiCnAreaIndex[0]].area2TreeInfos;
//如果第三列“区”的个数大于0,通过multiCnAreaIndex变更multiCnAreaArray[2]的值;否则赋值为空数组
}
that.multiCnAreaArray=data.multiCnAreaArray;
that.multiCnAreaIndex=data.multiCnAreaIndex;
}
that.$apply();
},
}
实现效果如下: