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

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>

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

预览如下所示:

相关推荐
世人万千丶7 小时前
鸿蒙Flutter TextStyle样式配置
学习·flutter·harmonyos·鸿蒙
吃着火锅x唱着歌8 小时前
Effective C++ 学习笔记 条款37 绝不重新定义继承而来的缺省参数值
c++·笔记·学习
小弥儿8 小时前
GitHub今日热榜 | 2026-07-19
人工智能·学习·github·知识图谱
zhangrelay10 小时前
笔记本轻量高品质延寿工具完整分系统清单
运维·笔记·学习
巴巴媛66610 小时前
STM32学习笔记【38.DHT11实验】
笔记·stm32·学习
爱勇宝11 小时前
上线 20 多天后,我才发现小程序的图片上传一直不可用
微信小程序·智能小程序
caimouse11 小时前
MM 学习笔记 01:miarm.h 核心头文件分析
笔记·学习·reactos
毛丫讲绘本11 小时前
独立老师开始做绘本课,怎样做少走弯路?
人工智能·学习·微信·微信公众平台·微信开放平台
upper202011 小时前
coremark移植坑之-nostartfiles -nostdlib参数
学习·fpga开发·coremark移植·riscv设计
Wyc7240911 小时前
agent第一周学习
学习