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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的java switch小程序,小程序自定义switch组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。