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

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>

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

预览如下所示:

相关推荐
进阶小白猿12 分钟前
Java技术八股学习Day13
java·jvm·学习
行业探路者24 分钟前
二维码制作工具使用指南:如何利用电脑摄像头轻松扫描和生成图片二维码
大数据·人工智能·学习·产品运营·软件工程
坏柠24 分钟前
从点亮一颗 LED 开始:ESP32-S3 GPIO 输出的正确学习方式
学习
如果你想拥有什么先让自己配得上拥有28 分钟前
三阶幻方了解-七年级上册
学习·总结
木木木一43 分钟前
Rust学习记录--C8 常用的集合
开发语言·学习·rust
星火开发设计1 小时前
Python数列表完全指南:从基础到实战
开发语言·python·学习·list·编程·知识·期末考试
朔北之忘 Clancy1 小时前
2025 年 6 月青少年软编等考 C 语言一级真题解析
c语言·开发语言·c++·学习·算法·青少年编程·题解
叫我:松哥2 小时前
基于 Flask 框架开发的在线学习平台,集成人工智能技术,提供分类练习、随机练习、智能推荐等多种学习模式
人工智能·后端·python·学习·信息可视化·flask·推荐算法
东心十2 小时前
AI学习环境安装
人工智能·学习
腾讯云云开发2 小时前
微信发布AI小程序成长计划:免费云开发资源+1亿token额度!
微信小程序·ai编程·小程序·云开发