如上图，小程序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. PAT甲级——1033 To Fill or Not to Fill

    1033 To Fill or Not to Fill With highways available, driving a car from Hangzhou to any other city i ...

  2. VS制作dll、def文件的使用、dll加入工程使用

    1.VS新建工程,在选项的时候,选择dll和空项目,保持干净的dll库: 创建完以后,添加头文件以及源文件. 2.将外部模块使用的接口导出: (1)函数导出: __declspec(dllexport ...

  3. UML Learning

    在建筑业中,建模是一项经过检验并被广泛接受的工程技术,建立房屋和大厦的建筑模型,能帮助用户得到实际建筑物的印象.在软件建模中也具有同样的作用,建模提供了系统的蓝图. 建模是为了能够更好地理解正在开发的 ...

  4. EmguCV从位图(Bitmap)加载Image<Gray,byte>速度慢的问题

    先说背景.最近在用C#+EmguCV(其实就是用P/Invoke封闭了OpecCV,与OpenCVDotNet差不多) 做一个视频的东西.视频是由摄像头采集回来的1f/s,2048X1000大小,其实 ...

  5. Tarjan模板——求强连通分量

    Tarjan求强连通分量的流程在这个博客讲的很清楚,再加上我也没理解透,这里就不写了. 缩点:将同一个连通块内的点视为同一个点. 扔一道模板题:codeVS2822爱在心中 第一问很显然就是求点数大于 ...

  6. HTTP协议八种请求类型介绍

    HTTP 协议中共定义了八种方法或者叫“动作”来表明对 Request-URI 指定的资源的不同操作方式,具体介绍如下: OPTIONS:返回服务器针对特定资源所支持的HTTP请求方法.也可以利用向W ...

  7. vuex-cart 介绍

    使用vue2 + vuex + vue-cli + localStorage + less,实现本地储存的购物车. 安装 1 git clone https: 1 cd sls-vuex 1 npm ...

  8. Listary快速查找文件

    快速查找文件 https://www.listary.com/

  9. LeetCode Day 9

    LeetCode0017 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23&q ...

  10. .net批量插入数据库,SqlBulkCopy方法

    /// <summary> /// 把数据插入LessonQuestion表 /// </summary> /// <param name="lessontit ...