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

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>

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

预览如下所示:

相关推荐
拖孩11 小时前
流量主门槛从 500 降到 100,我的小程序上线 18 小时够到了线
前端·后端·微信小程序
无心水11 小时前
22、数学与经济管理(运筹学) 核心考点与学习笔记
人工智能·笔记·学习·架构师·软考·软考架构师·软考系统架构师
小弥儿12 小时前
38K星的开源项目 t3code:给 Claude Code 和 Codex 装一个手机遥控器
学习·智能手机·开源·github
云-缩影12 小时前
做微信小程序,自建服务器还是用云托管:技术选型对比
服务器·微信小程序·小程序
xxwl58512 小时前
Nginx 基础学习笔记
笔记·学习·nginx
Star(up up up)12 小时前
Docker系列---Dockerfile镜像文件
人工智能·经验分享·学习·程序人生·docker·容器·github
外收内放13 小时前
ENSP学习记录(4)
服务器·学习·智能路由器
承渊政道14 小时前
Linux网络学习【五种IO模型与⾮阻塞IO】
linux·网络·学习·ubuntu·io模型·非阻塞io
无心水15 小时前
20、大数据架构设计理论与实践 核心考点与学习笔记
大数据·笔记·学习·架构师·系统架构设计师·软考系统架构设计师·架构设计师
程序员梅雨15 小时前
【从零开始学习数据仓库 | 第三篇】: Flume——数据采集基石
java·大数据·数据仓库·后端·学习·flume