小程序中自定義swtich組件樣式

小程序裏面的 swtich 原生組件樣式是下圖1，難保設計師不會用圖2之類的設計來代替：

圖1：

圖2：

---

 

直接上代碼：

一、wxml

<label class="mist-checkbox-switch">
  <view class="checkbox">
    <view class="iconfont {{ checked ? 'icon-checkbox-selected' : 'icon-checkbox-unselected' }}"></view>
  </view><!--
  --><switch bindchange="toggle"></switch><!--
  --><text>{{ label }}</text>
</label>

二、wxss（注意上圖2的勾勾是用的 iconfont，須要本身搜索下載）

@import '../../assets/wxss/iconfont.wxss'; /** * 隱藏原生 */ switch{ position:absolute; opacity: 0; top:0; bottom:0;
} .wx-switch-input{ width:0!important; height:0!important;
} .wx-switch-input::before, .wx-switch-input::after{ width:0!important; height: 0!important;
} .mist-checkbox-switch{ position: relative; line-height: 48rpx;
} .mist-checkbox-switch>.checkbox{ display: inline-block; margin-right:24rpx; vertical-align: middle;
} .mist-checkbox-switch>text{ vertical-align: middle; color:#777; font-size:34rpx; line-height:48rpx;
} .mist-checkbox-switch>.checkbox>.iconfont{ font-size:48rpx; line-height:48rpx; color:#ccc;
} .mist-checkbox-switch>.checkbox>.icon-checkbox-selected{ color:#715efb;
}

 三、js

// components/mist_checkbox_switch/mist_checkbox_switch.js Component({
  /** * 組件的屬性列表 */ properties: { label:{ type: String, }, checked:{ // 初始值輸入，輸出靠事件傳遞 type: Boolean, } }, /** * 組件的初始數據 */ data: { checked: false }, /** * 組件的方法列表 */ methods: { toggle(e){ const _val = e.detail.value this.setData({ checked: _val }) this.triggerEvent('toggle', {value: _val}) } } })

這裏，有幾處地方須要注意的。

首先，在wxml中，要用 label 標籤包裹 switch 組件，而後再在 label 標籤內部增長一個 text 標籤用來顯示說明文字，這樣在點擊說明文字的時候，也能觸發 switch 的變動。

咱們其實是經過「組件變化通知頁面相應 model 變化」的方式來實現，在 js 中咱們先記錄 switch 的默認值，這個默認值容許從頁面中傳遞過來，而後咱們監聽組件的點擊事件，每點擊一次就更新一次組件 checked 變量的值，也就是 switch 的選中狀態，同時咱們會把這個狀態經過事件通訊的方式傳遞到頁面上去，頁面再更新數據，調用過程相似下面：

<mist-checkbox-switch label="客戶須要選擇到店時間" checked="{{ shouldSelectTime }}" bind:toggle="onToggleIsShowTime"></mist-checkbox-switch>

 onToggleIsShowTime(e) { this.setData({ 'shouldSelectTime': e.detail.value ? 1 : 0 }) },

最後，咱們只須要想盡辦法把原生 switch 組件的原生樣式隱藏掉，而後就能夠自定義樣式了。

解決方案並非十分優雅，但確實可以知足需求，你們有更好的方法不要忘了分享哦～