小程序swiper修改指示点样式

最新推荐文章于 2025-06-23 17:17:27 发布

原创最新推荐文章于 2025-06-23 17:17:27 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css3

小程序专栏收录该内容

1 篇文章

订阅专栏

博客分享了如何简单修改小程序中swiper组件的指示点样式，提供了默认样式和选中状态样式的代码示例，让指示点更具个性化，避免复杂操作，实现快速定制。

小程序swiper修改指示点样式

小程序修改swiper指示点样式，实在无法忍受网上乱七八糟，很简单，几行样式就可以了，整的那么麻烦，有那空，睡会儿他不香，翻到这个文章的就别再找了，我这就是你要的答案
效果：在这里插入图片描述
代码：

/* 默认指示点的样式 */
.swiper .wx-swiper-dot {
  width: 12rpx;
  height: 12rpx;
  background: #eaeaea;
  border-radius: 50%;
}

/* 选中指示点的样式 */
.swiper .wx-swiper-dot.wx-swiper-dot-active {
  width: 12rpx;
  height: 12rpx;
  background: #1890ff;
  border-radius: 50%;
}