微信小程序picker选择器（下拉框）以及传值问题

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

wxml

js

效果

普通选择器

多列滚纤选择器

时分秒（时间选择器）

年月日 日期选择器

省市选择器

传值问题：

微信小程序picker选择器传值

以最简单的普通培缺选择器为例

wxml

js

wxss

array: ['工作', '放假', '加班', '大中仿调休'],对应的int值分别是0,1,2,3

在实际使用中

例子

微信小程序提交form表单内容

wxml

js

css

点击完成的时候，将所有填写的值传给后端

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

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

1）请求数据获得列表；

2）v-for循环绑定颜色选择器的value值；

3）绑定change事件，获取用户设置的颜晌州洞色值。

虽然获取到了用宴枯户改变的颜色列表，存在一个问题，颜色选择器改变值后， 在屏幕上点击鼠标，颜色选择器显示的颜色变成初始颜色，具体原因不明 。

1）请求数据获得列表；

2）生成一个对象，该对象的属性用于颜色选择器的双向绑定变量；

3）绑定change事件，获取用户设置的颜色值。

颜色选择器使用v-model，未出现设置完颜色后点击空白处出现颜色取消问题。有没有人遇到同样问题，可以解释迹坦一下。

---