小程序自定義switch組件

如上圖，小程序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 在開發者工具中預覽