用微信小程序开店之九——小程序组件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组件的运行效果


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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值