当前位置: 首页 > article >正文

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

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>

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

预览如下所示:


http://www.kler.cn/a/135475.html

相关文章:

  • 《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
  • 数据库SQL——连接表达式(JOIN)图解
  • MySql结合element-plus pagination的分页查询
  • NVIDIA Isaac Sim 仿真平台体验测评
  • AI 写作(五)核心技术之文本摘要:分类与应用(5/10)
  • 【 ElementUI 组件Steps 步骤条使用新手详细教程】
  • Vue3新增加的css语法糖
  • 牛掰的dd命令,cpi0配合find备份(不会主动备份),od查看
  • 测试Bard和ChatGPT关于双休的法规和推理
  • 【Java 进阶篇】Ajax 实现——JQuery 实现方式 `ajax()`
  • java学习part06数组
  • UDP网络套接字编程
  • 【开源】基于Vue.js的高校宿舍调配管理系统
  • MATLAB读取每行文本并提取字符串后的数字
  • Vim 从何而来?
  • Go并发编程学习-class1
  • 使用 VPN ,一定要知道的几个真相!
  • 5分钟带你了解什么是敏捷测试?难点显而易见!
  • qt使用AES加密、解密字符串
  • vue过渡,vue3组合式API详细介绍
  • Ajax之引入
  • 配置 `PostgreSQL` 与 `Keepalived` 以实现高可用性
  • 开发者生态:共享知识,携手共进,共创技术辉煌
  • PHP项目学习笔记-萤火商城-增加一个模块(表涉及到的操作和文件)
  • vue3项目安装eslint和prettier
  • mysql面试题——存储引擎相关