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

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>

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

预览如下所示:

相关推荐
辣知3 小时前
辣知·化智77 三千年接力写就的一本书
学习
一木 之林3 小时前
Dify学习笔记 01 · 平台入门与实战:部署、五类应用、RAG与MCP(第1-16集)
人工智能·笔记·学习·计算机视觉
摸鱼 特供版4 小时前
一款边录边标注的轻量截图录屏工具
windows·学习·电脑·音视频·软件需求
陈年老古董4 小时前
Hive 函数学习笔记(下):窗口函数与经典案例
hive·笔记·学习
andrsted4 小时前
练题簿在线免费刷题:Word、PDF 导题与预览补全,把现成资料变成可练习题库
微信小程序·小程序·pdf·word·学习方法·刷题
罗西的思考5 小时前
[Agent Memory / 强化学习] MemPO源码学习笔记 — (6)— 奖励机制
人工智能·笔记·学习
拾饵9425 小时前
第六周第二个项目笔记:FinInsRAG 项目学习笔记(零基础版)以及简历书写
笔记·学习
Lost_the_wind5 小时前
MySQL 学习笔记三
笔记·学习·mysql
欣欣之王来了5 小时前
开发环境准备:Node.js、npm、VS Code安装配置
前端·学习·架构·项目·vue3教程
计算机毕设定制辅导-无忧学长6 小时前
《校园食堂在线订餐小程序的设计与实现》
java·vue.js·spring boot·微信小程序·uniapp·校园食堂在线订餐小程序