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

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>

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

预览如下所示:

相关推荐
小弥儿5 小时前
GitHub今日热榜 | 2026-09-15:AI 智能体与本地生成工具领跑
学习·开源
susplus5 小时前
【初识ARM】ARM相关基础概念
学习·arm
XiHongShi20165 小时前
键盘大小写指示器(代替键盘灯)
学习·计算机
斯维赤7 小时前
AI Agent学习之路 | Prompt Engineering(提示词工程)的三板斧核心技巧
人工智能·学习·prompt
2301_802651089 小时前
imx6ull裸机开发:UART
学习
辣知10 小时前
辣知·化智56 良渚神权与夏朝颠覆
学习
dadaobusi10 小时前
学习:三层交换机
学习
笨鸟先飞的橘猫10 小时前
树结构在游戏行业中的应用
学习·游戏
yangmu320311 小时前
从显像管到Micro-LED:屏幕的光之进化
学习·显示器
半生过往12 小时前
前端工程师学习智能体开发(一)
前端·学习·状态模式