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

前言

通过微信小程序官方文档，我们可以看到表单组件中有picker这类滚动选择器。

现支持五种选择器，通过mode来区分，默认是普通选择器。

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

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

开始

1.1 wxml代码

当前选择：

复制代码

微信官方文档描述：

注意：

此处用到多列选择器：mode = multiSelector(最低版本：1.4.0)

由于引入的地区文件area.js是城市和地区都在一起，用name和value作为属性，所以选择range为二维Object这种类型，配合range-key一起使用。

1.2 js代码

第一步：引入地区文件

const area = require('../../common/area.js');

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