修改开关选择器switch的样式

微信小程序switch样式定制指南

最新推荐文章于 2022-07-07 15:46:08 发布

原创最新推荐文章于 2022-07-07 15:46:08 发布 · 674 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

94 篇文章

订阅专栏

本文介绍了如何在微信小程序中自定义开关选择器switch的样式，包括选中和未选中状态，以及小圆点的样式调整，提供了详细的官方文档链接和效果展示。

部署运行你感兴趣的模型镜像

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

1.一个开关

checked="true" 为选中状态

 <switch name="switch" checked="true" />

默认样式如图

2.修改选中状态样式


.wx-switch-input {
  width: 70rpx !important;
  height: 40rpx !important;
  background: #97c9c6 !important;
  border: 0rpx solid #97c9c6 !important;
}

选中状态下的样式如图点击关闭之后的样式

3. 修改选中状态下小圆点的样式

 .wx-switch-input::after {
  width: 40rpx !important;
  height: 40rpx !important;
}

如图：

4.关闭状态的样式

.wx-switch-input::before {
  width: 70rpx !important;
  height: 40rpx !important;
  background: #ddd !important;
  border: 0rpx solid #ddd !important;
}

效果如图：