微信小程序 switch 开关自定义大小样式、背景颜色

/* swtich整体大小 */
.wx-switch-input{
  width: 100rpx !important;
  height: 57rpx !important;
}
/* false的样式 */
.wx-switch-input::before{
  width: 100rpx !important;
  height: 53rpx !important;
}
/* true的样式 */
.wx-switch-input::after{
  width: 57rpx !important;
  height: 53rpx !important;
}

以上css代码用于定义switch按钮大小，关键来了。

<switch checked bindchange="switch1Change" color="#4A68EB" />

在switch组件里，有一个color属性，很容易被忽视，它就是用来设置按钮颜色的，所以并不需要通过css来设置按钮的背景色，如果你想通过css来设置背景色，你会很失望，因为颜色虽然可以定义，但效果嘛，你可以自己试试。