小程序的switch开关组件,总结下大概有三种使用场景。
其一: 纯展示场景, 用来展示某个开关值是打开还是关闭的,这个场景比较简单,给个disabled属性就ok了;
其二: 用户点击后立即切换开关值。
以上两种场景都是比较常规的使用场景,下面说下第三种场景

当用户点击后不能立即切换开关状态,需要先执行一些检查,最后判断是否需要切换开关状态。
此种场景下不能简单的使用switch组件,实现思路如下:
将switch组件包裹到view组件内部; switch组件设置为disabled, 不监听change事件,给switch的checked属性传递一个变量值。当用户点击switch时触发的view组件的click事件,在click事件里做一些处理,最后判断是否需要改变开关状态,如果需要改变则设置调用setData设置传给switch组件checked属性的变量值。

小程序的switch组件的更多相关文章

  1. 小程序自定义switch组件

    如上图,小程序api中的switch组件只能自定义颜色,不能自定义宽高,所以就开始了自己写switch组件. 自定义组件样式 switch组件样式大致如图,样式思路:未选中时为一个长方形有圆角按钮,和 ...

  2. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  3. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...

  6. 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError

    报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...

  7. 微信小程序中的组件

    前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...

  8. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  9. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

随机推荐

  1. ES6学习之Async函数

    定义:Async函数是一个异步操作函数,本质上,Async函数是Generator函数的语法糖.async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await ...

  2. 差一点搞混了Transactional注解

    今天给我的Srping业务层加如下Service和Transactional注解: @Service @Scope(BeanDefinition.SCOPE_SINGLETON) @Transacti ...

  3. 写一个c程序辨别系统是16位or32位

    方法: 32位处理器就是一次只能处理32位,也就是4个字节的数据,虚拟地址空间的最大大小是4G,而64位处理一次就能处理64位,即8个字节的数据,最大虚拟地址空间的最大大小是16T.最明显的是指针大小 ...

  4. C语言入门题

    1. 如下语句通过算术运算和逻辑运算之后 i 和 j 的结果是()         int i=0;         int j=0;         if((++i>0)||(++j>0 ...

  5. Hadoop YARN配置参数剖析(3)—MapReduce相关参数

    MapReduce相关配置参数分为两部分,分别是JobHistory Server和应用程序参数,Job History可运行在一个独立节点上,而应用程序参数则可存放在mapred-site.xml中 ...

  6. c/c++转义字符大全【转自互联网】

    将转义字符收集如下:转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) 008 \f 换页(FF) 012 \n 换行(LF) 010 \r 回车(CR) 01 ...

  7. Sharepoint商务智能学习笔记之PowerPviot Service安装与配置(七)

    1) PowerPviot Service多服务器部署注意事项 PowerPviot Service不是Sharepoint自带的服务,要想使用PowerPviot Service需要先在sharep ...

  8. Scrapy框架初探

    Scrapy 貌似是 Python 最出名的爬虫框架 0. 文档 中文文档:https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.ht ...

  9. 《OD大数据实战》Spark入门实例

    一.环境搭建 1. 编译spark 1.3.0 1)安装apache-maven-3.0.5 2)下载并解压 spark-1.3.0.tgz 3)修改make-distribution.sh  VER ...

  10. vue使用webpack压缩后体积过大要怎么优化

    vue使用webPack压缩后存储过大,怎么优化 在生产环境去除developtool选项 在webpack.config.js中设置的developtool选项,仅适用于开发环境,这样会造成打包成的 ...