如上图，小程序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. rsyslog与journal日志架构

    系统日志架构概述 在centos7系统中有两个日志服务,分别是传统的rsyslog和新添加的systemd-journal systemd-journal是一个改进型的日志管理服务,可以收集来自内核. ...

  2. JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单

    1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

  3. iOS涂色涂鸦效果、Swift仿喜马拉雅FM、抽屉转场动画、拖拽头像、标签选择器等源码

    iOS精选源码 LeeTagView 标签选择控件 为您的用户显示界面添加美观的加载视图 Swift4: 可拖动头像,增加物理属性 Swift版抽屉效果,自定义转场动画管理器 Swift 仿写喜马拉雅 ...

  4. Struts配置文件以Spring的方式实现自定义加载

    在使用struts时,我们需要在web.xml中配置过滤器,同时我们需要配置struts的配置文件路径来加载项目中struts的相关配置信息.如果我们不配置路径的话,Struts会有一些默认的加载路径 ...

  5. 做成像的你不得不了解的真相2-灵敏度和QE

    科研级相机的灵敏度由三个主要参数决定: 探测器的QE, 像元尺寸和相机噪声. 后两项我们以后再做专题讨论.这期先讲讲小编认为顶顶重要,看起来最容易理解,但是其实还有些奥妙的QE. QE-量子效率 QE ...

  6. spring学习笔记四：AOP

    AOP(Aspect Orient Programming),面向切面编程,是对面向对象编程OOP的一种补充 面向对象编程使用静态角度考虑程序的结构,而面向切面编程是从动态角度考虑程序运行过程 AOP ...

  7. openssl内存分配，查看内存泄露

    openssl内存分配 用户在使用内存时,容易犯的错误就是内存泄露.当用户调用内存分配和释放函数时,查找内存泄露比较麻烦.openssl提供了内置的内存分配/释放函数.如果用户完全调用openssl的 ...

  8. OpenWrt编译后生成的bin文件：jffs2与squashfs、factory与sysupgrade

    OpenWrt编译后会生成多个bin文件,比如 openwrt-ar71xx-generic-tl-wr841nd-jffs2-factory.bin 8126464 openwrt-ar71xx-g ...

  9. python django ORM

    1.在models.py中创创建类 # -*- coding: utf-8 -*- from __future__ import unicode_literals from django.db imp ...

  10. input系统——android input系统

    AndroidInput系统--JNI NativeInputManager InputManger InputReader AndroidInput系统--InputReader AndroidIn ...