用微信小程序开店之九——小程序组件5：“表单”（3）

上回书讲到“表单”组件的：picker标签组件，并给出编程示例进行效果展示；今天继续讲“表单”组件的：picker_view、slider、switch标签组件，先简单介绍下这三个组件：

a、picker-view组件：支持自定义多列选择列表；

b、slider组件：滑块组件，支持——设置左右两端带图标的滑块、step步进滑块、显示进度值滑块、预设最大/最小值滑块；

c、switch组件：简单易用的开关选择器；

闲言少叙，进入主题：

1、复习小程序基础组件总览图

2、表单组件

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

（1）修改test.wxml文件，添加“picker-view”标签组件（我们以“年月日时分秒”举例）

（2）修改test.js文件，添加组件数据填充所需要的常量（const）及初始化值

（3）修改test.js文件，添加页面组件data初始数据定义

（4）修改test.js文件，添加页面组件绑定事件

（5）保存，自动编译，查看picker-view组件的运行效果

下面用简单示例验证slider（滑块）组件

（6）修改test.wxss文件，添加“section section_gap”样式备用

（7）修改test.wxml文件，添加“slider”标签组件（我们以“左右端图标、step步进、显示进度值、设置最大/最小值”效果举例）

（8）修改test.js文件，添加组件调试模式下的操作效果数据刷新日志事件处理方法

（9）保存，自动编译，在“调试”模式下，查看slider组件的运行效果

本讲的最后用简单示例验证switch（开关选择）组件

（10）修改test.wxml文件，添加“switch”标签组件（我们以“初始化选中、初始化未选中”两种效果举例）

（11）修改test.js文件，添加组件调试模式下的switch点击事件处理方法

（12）保存，自动编译，在“调试”模式下，查看switch组件的运行效果

好啦，到此为止“表单”这个小程序中最大的组件集合介绍完了。下节继续讲解剩余的小程序组件。 ^_^