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

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>

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

预览如下所示:

相关推荐
努力努力再努力FFF19 小时前
普通人适合考什么AI证书?不同基础和学习目标怎么选
人工智能·学习
叼烟扛炮20 小时前
Linux 学习笔记(三十二):线程控制——创建、等待与分离
linux·运维·服务器·笔记·学习·1024程序员节
瑞克-桑切斯20 小时前
PostgreSQL 14.4 源码部署 & 运维手册(CentOS7)
数据库·学习·postgresql
小嘉丶学长20 小时前
Day06 · 数据类型与类型检测
开发语言·python·学习·1024程序员节
叼烟扛炮20 小时前
Linux 学习笔记(二十九):进程信号(上)—— 信号捕捉与异步魔法
linux·运维·笔记·学习·1024程序员节
代码山河21 小时前
调试技巧:IDEA Debug模式入门与使用
java·学习·架构·教程·面向对象·项目
外收内放21 小时前
FastAPI猜字谜实战(5):会话管理
开发语言·python·学习·fastapi
叼烟扛炮21 小时前
Linux 学习笔记(三十一):线程概念、底层分页机制与初体验
linux·运维·服务器·笔记·学习·1024程序员节
HY小宝F21 小时前
智能摄像头系统 30 天学习计划 Day 09:用 RTSP 把视频送到网络
网络·学习·音视频
小猪佩奇TONY21 小时前
Linux 内核学习(19) --- linux waitqueue
linux·学习·waitqueue