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

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>

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

预览如下所示:

相关推荐
有为少年10 分钟前
带噪学习 | Ambient Diffusion (NeurIPS 2023)下篇
人工智能·深度学习·神经网络·学习·机器学习·计算机视觉
代码游侠24 分钟前
复习——线程(pthread)
linux·运维·开发语言·网络·学习·算法
做cv的小昊34 分钟前
【TJU】信息检索与分析课程笔记和练习(3)学术评价
大数据·人工智能·经验分享·笔记·学习·全文检索
重生之我在番茄自学网安拯救世界1 小时前
网络安全中级阶段学习笔记(九):upload靶场实战(14-16关)-图片马制作与通过教学
笔记·学习·网络安全·文件上传漏洞·图片木马
RanceGru1 小时前
LLM学习笔记7——unsloth微调Qwen3-4B模型与vllm部署测试
人工智能·笔记·学习·语言模型·vllm
deng-c-f1 小时前
Linux C/C++ 学习日记(57):定时器
学习
楠了个难1 小时前
安服优-B-1 人体红外测温传感器——ZYNQ学习笔记23
笔记·学习
李慕婉学姐2 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
式5162 小时前
大模型学习基础(六) 强化学习(Reinforcement Learning,RL)初步1.4
学习
小猪佩奇TONY2 小时前
Linux 内核学习(13) --- linux 内核并发与竞态
linux·服务器·学习