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

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>

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

预览如下所示:

相关推荐
雨落在了我的手上28 分钟前
如何学习java?
java·开发语言·学习
空中海1 小时前
微信小程序 - 03 工程实践层与综合 Demo
微信小程序·小程序·notepad++
吃好睡好便好1 小时前
汽车基本组成
学习·汽车
小徐_23332 小时前
Wot UI v1 升级 v2?这份迁移指南帮你少踩坑!
前端·微信小程序·uni-app
拾忆丶夜2 小时前
unity 热力图学习
学习·unity·游戏引擎
red_redemption3 小时前
自由学习记录(183)
学习·ue项目改名字的学问
lizhihai_993 小时前
股市学习心得-智能体顶层设计文件收益供应链
大数据·人工智能·学习
中草药z3 小时前
【测试基础】Python 核心语法,一篇搞定测试脚本开发基础
开发语言·笔记·python·学习·测试·语法
一口吃俩胖子3 小时前
【脉宽调制DCDC功率变换学习笔记020】频域性能准则
笔记·学习
优睿远行3 小时前
微信小程序云开发环境搭建与REST API混合架构实战
微信小程序·小程序