如上图，小程序api中的switch组件只能自定义颜色，不能自定义宽高，所以就开始了自己写switch组件。

自定义组件样式

switch组件样式大致如图，样式思路：未选中时为一个长方形有圆角按钮，和一个半径为长方形【（长方形高度／2）-1】的圆圈，当状态为选中时，圆圈向右滚动，滚动距离为【长方形宽度-长方形高度-1】,动画效果通过过渡属性来赋予的，控制圆圈的left值。

自定义组件构思

从父组件传来值有：高度height，宽度width，选中时背景bgColor，未选中背景unBgColor，是否选中的状态值checked,宽高单位为rpx。

定义了一个组件方法，点击时触发该方法执行，执行后要做的事情交给父组件来处理，并且传给父组件一个状态值，考虑到在真实情况下会进行http请求，所以传了一个请求成功时的回调和失败时的回调。

组件使用

在写demo时发现一个问题：当checked值直接在wxml中写入false或者是true时状态都为true,只有在js中定义data值为false,才使得状态为false,具体原因不造，哪位大大要是知道原因，烦请告知。

！！！项目demo！！！
附链接：wechatide://minicode/ZErlcKmG79Em 在开发者工具中预览

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

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

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

  2. 小程序的switch组件

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

  3. 微信小程序 自定义导航组件 nav头部 全面屏设计

    nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能 初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字 ...

  4. 微信小程序——自定义图标组件

    字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 inde ...

  5. 微信小程序 - 自定义components组件详解A篇

    官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义 ...

  6. 微信小程序 - 自定义switch切换（示例）

    点击下载:switch示例 ,适用于表单,官方switch 说明 .

  7. 微信小程序 - 自定义弹窗组件

    2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按 ...

  8. 百度小程序自定义通用toast组件

    百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...

  9. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

随机推荐

  1. django，模板继承常用标签和规则

    一.定义基础模板 在html内容中定义多个block块,block由子模板引用同名block块,来决定是否替换这些部分{% block title %}一些内容,这里可不填{% endblock %} ...

  2. 吴裕雄--天生自然python学习笔记：爬取我国 1990 年到 2017年 GDP 数据并绘图显示

    绘制图形所需的数据源通常是不固定的,比如,有时我们会需要从网页抓取, 也可能需从文件或数据库中获取. 利用抓取网页数据技术,把我国 1990 年到 2016 年的 GDP 数据抓取出来 ,再利用 Ma ...

  3. CCD （电荷耦合元件）

    CCD 是指电荷耦合器件,是一种用电荷量表示信号大小,用耦合方式传输信号的探测元件,具有自扫描.感受波谱范围宽.畸变小.体积小.重量轻.系统噪声低.功耗小.寿命长.可靠性高等一系列优点,并可做成集成度 ...

  4. python之event事件

    同进程的一样,线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其 他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就会变得非常棘手.为了解决这些问题,我们需 ...

  5. CentOS 5.5 --学习（1）

    一.解决浏览器乱码问题: 用yum 安装 yum  -y  install  fonts-chinese yum  -y  install  fonts-ISO8859-2-75dpiCentOS系统 ...

  6. 网页title滚动

    );        var leftstar=title.substring (1,title.length );        document.title =leftstar +firstch ; ...

  7. Java的简易ATM系统

    大纲   ATM 机系统                   1.注册(账户(系统随机生成 15 位) - 密码(6位) - 余额)                   2.登录            ...

  8. 德国、日本的制造业为什么不能完全执行SOP？

    在过去几十年,德国.日本的制造企业简直就是"以质取胜"的代名词,一些制造业的CEO非常自豪,甚至在公开场合调侃:大家好,我就是"保质保量"本人,也正因如此,德国 ...

  9. 用Hutton32玩转数字电路（一）：逻辑门

    最近看到有人用Minecraft里面的红石电路制作出了计算器,还有一篇神文:<基于Minecraft实现的计算机工程>,视频在此,好像还能算浮点数.三角函数.我对红石不是太了解,那能不能用 ...

  10. pycharm中无法导入pip安装的包

    https://blog.csdn.net/mdxiaohu/article/details/82430060 2020.1.20 练习通过python操作数据库的时候需要导入一个包,因为看代码写的是 ...