微信小程序代码怎么实现四个相等区域

微信小程序中支持省市区地址级联吗？

微信小程序中的地址级联最多支持到几级？

今天，我们就来看看，微信小程序中的地址级联的使用，以及一些坑…希望大家看完之后能避免踩坑啊。

省市区级联

小程序中，picker组件是个很棒的组件，可以干好多事儿，微信官方对它的解释是：

从底部d起的滚动选择器。

那么，它都支持哪些功能呢？

普通选择器(selector)

多列选择器(multiSelector)

时间选择器(time)

日期选择器(date)

省市区选择器(region)

属性列表参考如图所示：

小程序官网关于picker的介绍

小程序官网提供了5中选择器，分别是：

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

以下仅列举省市区选择器的用法：

index.wxml

index.js

多看文档，不然又要自己封装了。。。

拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：

1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图

2、在vant-picker的onChange事件中，对上面数组进行分级控制。

3、难点，需要把数组按三级拆分出来，放到picker的三列中，控制不好就会各种报错。

1、json，引入vant-picker

2、wxml

绑定change confirm 2个必须事件

3、js文件

3.1 定义选项内容，需要分成三级

3.2 data 中实现picker3列

3.3 onChange 事件实现

3.4 常见问题

3.4.1 最后一级如果没有内容，vant-picker会报错，所以需要做一个空判断，如果为空，赋值一个常量

3.4.2 是使用value，还是选择使用自己定义的常量，需要调试看。value值已经获取到了三列数据，但是容易出错。我最后还是选择使用原来定义常量proSelectList。

4.1 三级数据齐全的选择

4.2 第三级如果为空，第三列使用默认数据

---