【微信小程序】寫一個能自定義尺寸、樣式的switch

小程序原生的switch不能靈活的修改寬高、樣式，很不方便，我這邊參考WeUI的開關，寫了一個能夠自定義尺寸樣式的switch組件。

直接上代碼：https://gitee.com/piscdong/we...

效果以下圖，能夠自定義寬高，能夠作成方角的

代碼分析

這個switch主要的難點就是點擊後背景顏色變換的動畫，這裏用到了css的transition、transform兩個屬性來實現動畫，以及::before和::after兩個僞元素。

wxml基本結構爲：

<view class="switch">
    <view></view>
</view>

父級view是整個switch容器，會用到::before作背景色切換動畫，::after作禁用時的灰色遮罩。內部的一個view是來回切換的白點。未選中時默認class是switch，選中時增長一個class：switch_checked。

選中狀態到未選中狀態背景有一個從中間變大到所有的白色動畫，因此須要給父級view設置一個顏色做爲背景色。

.switch {
    ...
    background: #00c000;
    position: relative;
}

未選中時::before覆蓋整個容器，選中時::before設置transform: scale(0);，這樣選中時白色區域就會縮放到最小，再加上transition實現動畫效果。

.switch::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9999rpx;
    background: #fff;
    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch_checked::before {
    transform: scale(0);
}

來回移動的白點，未選中時經過left: 0;定位到左側，選中時將left設置爲100%定位到右側，可是這樣白點會徹底移出容器範圍，因此還須要加上transform: translateX(-100%);將白點向左再必定自身寬度的100%，一樣加上transition實現動畫效果。

.switch view {
    position: absolute;
    top: 0;
    left: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch_checked view {
    left: 100%;
    transform: translateX(-100%);
}

關於「::」

最後搭車說一下「:」和「::」，「:」是僞類，「::」是僞元素。按照個人理解：僞類不會在dom中增長節點，只不過是css選擇器的一種特殊效果；僞元素會增長節點，flex佈局中會影響到其餘元素。

爲了保證兼容性，css3是容許僞元素使用單個冒號。