小程序 switch 组件 设置/更改样式

最近调小程序，发现switch 组件样式 class 设置后不生效。

于是就研究了一番。目前找到两种方案，以下给分享出来，希望有需要的可以用到。

switch 组件样式调整解决方案

index.wxml

<switch class="wx-switch-input"/>

 

1. 通过 important 来强制覆盖。

 

index.less

/*swtich整体大小及背景色*/
.wx-switch-input{
    width:80rpx !important;
    height:35rpx !important;
    background: #50D2C2 !important;
    border: #50d2c2 !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
    width:80rpx !important;
    height: 35rpx !important;
}
/* 中间的小圆球 */
/*绿色样式（true的样式）*/
.wx-switch-input::after{
    width: 40rpx !important;
    height: 35rpx !important;
}

 

2. 通过 zoom 控制缩放（可能造成按钮比底部框大）

index.less

.wx-switch-input{
　　zoom: 0.8 (缩放比例)
}