用微信小程序开店之八——小程序组件4：“表单”（2）

上回书讲到“表单”组件的：View、input、checkbox-group、radio-group、lable、button标签组件，并给出编程示例进行效果展示。今天继续讲“表单”组件的：picker标签组件。

1、小程序基础组件总览（老规矩，先上基础组件总图，帮大家回忆一下）



2、表单组件

继续使用之前建的test页面，用于今天课程内容的表单组件展示

（1）修改test.json文件，添加“section”、“section_title”、“picker”样式备用



（2）修改test.wxml文件，添加“picker”标签组件，title写成：普通选择器



（3）修改test.js文件，添加“array”待选数据项



（4）修改test.js文件，添加“bindPickerChange”事件处理方法



（5）点击“测试页面1”标签，在test页面中点击“普通选择器”->“当前选择”，选择“智利”，点击“确定”。展示效果如下：





（6）修改test.wxml文件，添加“picker”标签组件，title写成：多列选择器，mode设定为：multiSelector



（7）修改test.js文件，添加“multiArray”、“objectMultiArray”、“multiIndex”待选数据项及相关初始下标值数组



（8）修改test.js文件，添加“bindMultiPickerChange”、“bindMultiPickerColumnChange”事件处理方法







（9）点击“测试页面1”标签，在test页面中点击“多列选择器”->“当前选择”，选择“软体动物”->“河蚌”，点击“确定”。展示效果如下：





（10）修改test.wxml文件，添加“picker”标签组件，title写成：时间选择器，mode设定为：time



（11）修改test.js文件，添加“bindTimeChange”事件处理方法



（12）点击“测试页面1”标签，在test页面中点击“时间选择器”->“当前选择”，选择“12:12”，点击“确定”。展示效果如下：





（13）修改test.wxml文件，添加“picker”标签组件，title写成：日期选择器，mode设定为：date



（14）修改test.js文件，添加“date”待选数据项初始值



（15）修改test.js文件，添加“bindDateChange”事件处理方法



（16）点击“测试页面1”标签，在test页面中点击“日期选择器”->“当前选择”，选择“2016-12-01”，点击“确定”。展示效果如下：





（17）修改test.wxml文件，添加“picker”标签组件，title写成：省市区选择器，mode设定为：region



（18）修改test.js文件，添加“region”待选数据项初始值



（19）修改test.js文件，添加“bindRegionChange”事件处理方法



（20）点击“测试页面1”标签，在test页面中点击“省市区选择器”->“当前选择”，选择“河南省，开封市，龙亭区”，点击“确定”。展示效果如下：





今天先到这里，下节我们继续。 ^_^