《微信小程序开发从入门到实战》学习二十二

3.3 开发创建投票页面

3.3.10 使用switch开关组件

用switch开关组件增加一个设置是否匿名投票的功能。

switch常用属性如下:

checked 开还是关,默认false关

disabled 是否禁用,默认false不禁用,可以开关

color switch的颜色,有默认色

bindchange checked改变时触发的事件处理函数

修改JS文件,在data对象加入一个用于保存是否匿名投票的变量:

isAnonymous: false

同时增加一个switch开关变化触发的事件处理函数:

onChangeIsAnnoymous(e) {

this.setData({

isAnonymous: e.detail.value

})

}

最后修改wxml文件,在"截止日期"设置的下方添加如下代码:

<view class="form-item">

<text class="form-item-label">匿名投票</text>

<switch checked="{{isAnonymous}}" bindchange="onChangeIsAnnoymous"/>

</view>

样式可以复用"截止日期"设置的样式,无须编写样式代码。

预览如下所示:

相关推荐
Nan_Shu_6142 小时前
学习:ES6(2)
前端·学习·es6
河铃旅鹿3 小时前
Android开发-java版:Framgent
android·java·笔记·学习
自动化代码美学5 小时前
【Python3.13】官网学习之控制流
开发语言·windows·python·学习
AA陈超6 小时前
ASC学习笔记0020:用于定义角色或Actor的默认属性值
c++·笔记·学习·ue5·虚幻引擎
檐下翻书1737 小时前
从入门到精通:流程图制作学习路径规划
论文阅读·人工智能·学习·算法·流程图·论文笔记
SalvoGao8 小时前
Python学习 | 怎么理解epoch?
数据结构·人工智能·python·深度学习·学习
思成不止于此8 小时前
深入理解 C++ 多态:从概念到实现的完整解析
开发语言·c++·笔记·学习·多态·c++40周年
Highcharts.js8 小时前
学习 Highcharts 可视化开发的有效途径
学习·数据可视化·highcharts·图表开发·可视化开发
胡童嘉8 小时前
长沙烈焰鸟网络科技有限公司实习day12+软件测试学习day3日记
学习
2501_9411458510 小时前
虚拟现实与增强现实技术在教育培训与沉浸式学习场景中的创新应用研究
学习·ar·vr