用微信小程序开店之九——小程序组件5:“表单”(3)
2017-08-26 12:52
591 查看
上回书讲到“表单”组件的: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组件的运行效果
好啦,到此为止“表单”这个小程序中最大的组件集合介绍完了。下节继续讲解剩余的小程序组件。 ^_^
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组件的运行效果
好啦,到此为止“表单”这个小程序中最大的组件集合介绍完了。下节继续讲解剩余的小程序组件。 ^_^
相关文章推荐
- 用微信小程序开店之七——小程序组件3:“表单”(1)
- 用微信小程序开店之八——小程序组件4:“表单”(2)
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 用微信小程序开店之六——小程序组件2:“基础内容”
- 用微信小程序开店之五——小程序组件1:“视图容器”
- 微信小程序开发—(十四)表单组件1
- 2.3.2微信小程序表单组件 checkbox
- 微信小程序-表单组件
- 微信小程序form表单组件示例代码
- 微信小程序 3----表单组件
- 微信小程序表单组件picker-view(嵌入页面的滚动选择器)
- 微信小程序之自定义组件的实现代码(附源码)
- 微信小程序——slider组件
- 微信小程序getPhoneNumber快速获取用户手机号组件
- 微信小程序 radio单选框组件详解及实例代码
- 微信小程序:组件实践
- 微信小程序基本组件概述
- 微信小程序的组件用法与传统HTML5标签的区别
- 微信小程序 PHP后端form表单提交实例详解
- 小程序用户反馈-HotApp小程序统计仿微信聊天用户反馈组件