上回书讲到“表单”组件的: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组件的运行效果
好啦,到此为止“表单”这个小程序中最大的组件集合介绍完了。下节继续讲解剩余的小程序组件。 ^_^