微信小程序 之修改switch组件尺寸大小

组件

<switch checked="{{switchChecked}}" color="#2ea7e0" bindchange="" />

方案一：

通过transform中的缩放属性改变组件大小

.wx-switch-input{
  transform:scale(0.8) !important;
}

方案二：

通过原生组件的类名改变组件大小

 .wx-switch-input {
  width: 102rpx !important;
  height: 60rpx !important;
  margin: 0 !important;
  padding: 0 !important;
} 

/*白色样式（false的样式）*/
.wx-switch-input::before {
  width: 97rpx !important;
  height: 56rpx !important;
} */

/*绿色样式（true的样式）*/
.wx-switch-input::after {
  width: 58rpx !important;
  height: 56rpx !important;
}0