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

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>

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

预览如下所示:

相关推荐
阿祖zu7 小时前
训练师 Agent 小程序产品上线啦
微信小程序·llm·agent
xqqxqxxq7 小时前
AI Agent学习:Agent协作工具技术笔记(李博杰《深入理解 AI Agent》4.6观后总结)
笔记·学习
白猫不黑7 小时前
大学网安方向学习路线:零基础与有基础的学习顺序整理
学习·web安全·计算机·网络安全·信息安全·编程·src漏洞
工业HMI实战笔记8 小时前
玩具制造HMI:注塑成型的快速换模与质量监控界面
人工智能·学习·交互·制造
你在我身后9 小时前
发展路线建议
学习
彧azz9 小时前
数据结构:关于图的学习
c语言·数据结构·笔记·学习·算法
苦猿的大模型日记9 小时前
Day57|从0学习 Claude Code(七):我没把说明书全塞给它,用到哪本才翻哪本
学习
GHL2842710909 小时前
豆包以图生图学习
学习·ai
小诗懂技术9 小时前
【硬件学习入门】--嵌入式51单片机点灯与延迟效应
学习
DevangLic10 小时前
opencode go要完蛋了吗
运维·学习