小程序省市区联动三种方法

第一种，微信自带的省市区数据

第二种，根据省id,ciiyid联动

js

第三种,数据一次性唤宽隐返回，巧腊如下

直接复制可用

利用vant(后台返回的所有数据)

如果w-vant需要做和厅成联动的话；一级一级的请求回来再处理数据就可以了

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

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 第三级如果为空，第三列使用默认数据

场景：画图应用需选择画笔颜色，有4种颜色按钮可供选择，用户点击任意按钮进行颜色切换。

思路仿搭：通过curColorIndex变量保存当前选中的颜色下标，选中后添加额外的选中样式

一，canvas.wxss文件：这个文件用于缺大辩定义按钮正常态和选中态的样式，以及Flex

布局的约束

二，canvas.wxml文件：这个文件伏缺是Demo的布局界面，通过使用js的data数据和wxss的class样式进行页面布局

这里通过wx：for实现循环打印颜色数组，通过curColorIndex值控制选中的样式，index值进行参数传递

三，canvas.js文件：提供数据，以及处理xwml的控件响应，并通过设置this.setData的值来更新xwml的显示

原文地址： http://www.jianshu.com/p/657e3b2a8aa4 http://www.jianshu.com/p/657e3b2a8aa4

---