如上图，小程序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. 49),PHP, 重写

  2. 基于 maven 的ssm 框架搭建

    1.新建一个 maven 工程, war 包 2.引入 pom 文件(springmvc+spring+mybatis) 3.引入配置文件 4.引入页面,编写 contorller 层测试 5.编写查 ...

  3. 解决一个通过 WebReference 调用 WCF 时自定义 DataContract 类参数提交的问题

    先看一下VS2013自动创建默认的IService1.vb,注意自定义的数据契约 CompositeType ' 注意: 使用上下文菜单上的“重命名”命令可以同时更改代码和配置文件中的接口名“ISer ...

  4. xmemcached过期时间

    最近项目中使用到了Memcached,而客户端选择了XMemcached ,在设置过期时间时,因对Memcached 不熟悉,将expire 设置为1000000000,本意表示尽量长的时间不要过期, ...

  5. bzoj 3450 Tyvj1952 Easy (概率dp)

    3450: Tyvj1952 Easy Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败 ...

  6. Java面试题4-附答案

    BIO.NIO和AIO的区别   Java BIO : 同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程 ...

  7. 初试vue

    Vue了解 """ vue框架 vue是前台框架:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式. ...

  8. 快速进入当前目录的cmd窗口

  9. VisionPro和Halcon的详细对比

    一.概括的对比 1.1  Halcon的优势 Halcon有着更加低廉的Lisence 1.并且提供更好.更强大的2D和3D的视觉软件库 2.Halcon支持的视觉图像采集设备数量是Visionpro ...

  10. Derby 命令

    SHOW [ TABLES | VIEWS | PROCEDURES | FUNCTIONS | SYNONYMS ] { IN sche -- 列出表.视图.过程.函数或同义词 SHOW INDEX ...