/* 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来设置背景色,你会很失望,因为颜色虽然可以定义,但效果嘛,你可以自己试试。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐