如上图，小程序api中的switch组件只能自定义颜色，不能自定义宽高，所以就开始了自己写switch组件。
自定义组件样式
switch组件样式大致如图，样式思路：未选中时为一个长方形有圆角按钮，和一个半径为长方形【（长方形高度／2）-1】的圆圈，当状态为选中时，圆圈向右滚动，滚动距离为【长方形宽度-长方形高度-1】,动画效果通过过渡属性来赋予的，控制圆圈的left值。
自定义组件构思
从父组件传来值有：高度height，宽度width，选中时背景bgColor，未选中背景unBgColor，是否选中的状态值checked,宽高单位为rpx。
定义了一个组件方法，点击时触发该方法执行，执行后要做的事情交给父组件来处理，并且传给父组件一个状态值，考虑到在真实情况下会进行http请求，所以传了一个请求成功时的回调和失败时的回调。
组件使用
扫描二维码关注公众号，回复：
7906917 查看本文章
在写demo时发现一个问题：当checked值直接在wxml中写入false或者是true时状态都为true,只有在js中定义data值为false,才使得状态为false,具体原因不造，哪位大大要是知道原因，烦请告知。
！！！项目demo！！！
附链接：wechatide://minicode/ZErlcKmG79Em 在开发者工具中预览