小程序的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. java基础知识(9)---异常

    异 常: 异常:就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信 ...

  2. idea崩溃导致的svn插件丢失问题, maven dependencies视图丢失问题

    Idea丢失Svn解决办法 今天打开Idea,习惯用ctrl+t来更新svn,杯具出现了,快捷键失效了,我觉得可能是其他的什么软件占用了这个快捷键,于是重启了一下,发现还是不行,svn信息怎么没了,c ...

  3. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

  4. Flask06 地址约定、利用falsk提供的方法渲染模板

    1 访问地址约定 在访问路径的末尾是否需要加 / -> 可以加,也可以不加 前端的访问路径必须和后端的路径完全匹配才能够访问成功,如果我们在后台的路径都是以 / 结尾,但是我们的访问路径是没有以 ...

  5. Jmeter进行简单mysql数据库测试

    1.环境准备: mysql: mysql-5.7.17.msi jdbc驱动: 自己百度一下即可 Jmeter:  3.2 2.打开Jmeter,创建测试计划,   点击浏览,添加jdbc驱动 3.添 ...

  6. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  7. VSCode编写C/C++项目

    VSCode编写C/C++项目 1. 下载插件C/C++.C++ Intellisense;2. 新建一个空文件夹,从VSCode打开. (或File-->Open Folder-->新建 ...

  8. uWSGI + Nginx + Django 部署

    1. uWSGI 服务器 Django 默认使用 WSGI(Python Web Server Gateway ) 作为 Web 服务器,一般仅用来作为测试使用,实际生产环境而是使用 uWSGI 和 ...

  9. 微信JSApi支付---常见问题

    1.支付一直报  “get_brand_wcpay_request:false” 错误 原因: 商户平台上设置的[支付授权目录]路劲不正确,比如:支付的页面的域名是:www.xxx.com/pay/s ...

  10. es6- Generator函数实现长轮询

    1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态.形式上,Gene ...