微信小程序switch組件尺寸控制

1、修改switch組件的屬性值

/* switch */
.wx-switch-input{
    width: 82rpx!important;
    height: 40rpx!important;
}
/*關閉狀態*/
.wx-switch-input::before{
    width: 80rpx!important;
    height: 36rpx!important;
}
/*開啟狀態*/
.wx-switch-input::after{
    width: 38rpx!important;
    height: 36rpx!important;
}

效果圖如下：

可以看的出來，當分辨率改變之后，樣式就會錯亂，所以不推薦。

 

2、利用css3的zoom屬性來修改組件

.wx-switch-input {
    zoom: .6;
}

效果圖如下：

可以看出來，這種改變方式，不會導致樣式錯亂，但是因為使用的是縮放屬性，所以如果不通過動態來控制它的話，那么不論你分辨率如何改變，它的尺寸也不會發生變化。

因此，需要根據頁面分辨率不同來設置不同的zoom值，才能做到比較完美的結果。