如上图，小顺序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 在开发者东西中预览