微信小程序--手写一个地区选择器（多级联动）

news/2024/7/5 12:14:20

前言

通过微信小程序官方文档，我们可以看到表单组件中有picker这类滚动选择器。现支持五种选择器，通过mode来区分，默认是普通选择器。

普通选择器
多列选择器
时间选择器
日期选择器
省市区选择器

需求场景：官方的地区选择器是三级联动，包括省市区，那如果业务场景是两级选择器，只需要省市呢？或者说，城市所对应的value值需要自定义呢？自己手写一个地区选择器会是一个不错的选择。废话不多说，马上撸代码。

开始

1.1 wxml代码

	<picker mode="multiSelector" bindchange="bindchange" bindcolumnchange="bindAreaChange" range="{{areaList}}" range-key="name" value="{{address}}">
	    <view class="picker">
			当前选择：
		</view>
	</picker>
复制代码

微信官方文档描述：

注意：

此处用到多列选择器：mode = multiSelector（最低版本：1.4.0）
由于引入的地区文件area.js是城市和地区都在一起，用name和value作为属性，所以选择range为二维Object这种类型，配合range-key一起使用。

1.2 js代码

第一步：引入地区文件

const area = require('../../common/area.js');
复制代码

第二步：初始化省份列表，并默认展示市

this.province = area.filter(v => !v.parent )
this.bindAreaChange({
    detail: {
        column: 0,
        value: 0
    }
})
复制代码

第三步：省份触发change事件

bindAreaChange:function(e){
    if(e.detail.column==0){//判断当前改变的是第一列，下标从0开始
        const index = e.detail.value;//获取选中下标
        const current_province = this.province[index];
        const all_city = area.filter(v =>  v.parent == current_province.value )
        this.setData({
            areaList:[this.province,all_city]
        })
    }
}
复制代码

1.3 area.js

数据结构长这样

const address = [{
        "name": "安徽省",
        "value": "1"
    },
    {
        "name": "合肥市",
        "parent": "1",
        "value": "***"//此处省略n个字，/偷笑
    },
    {
        "name": "安庆市",
        "parent": "1",
        "value": "***"
    }]
module.exports = address;
复制代码