微信小程序 — 自定义轮播图的面板指示点样式

最新推荐文章于 2024-06-10 09:18:40 发布

棒怡情

最新推荐文章于 2024-06-10 09:18:40 发布

阅读量1.5k

点赞数

分类专栏：微信小程序开发文章标签：微信小程序前端 css

本文链接：https://blog.csdn.net/bangyiqing/article/details/125097646

版权

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

27 篇文章 3 订阅

订阅专栏

swiper默认指示板样式是小圆点。实现如图效果（选中的椭圆样式，宽一点）

实现方式：修改swiper的css样式。

/* 圆点的样式  因为大小不一样。所以按钮设置大小之后，背景色记得设置完全透明*/
swiper .wx-swiper-dot {
  width: 30rpx;
  height: 6rpx;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  background: rgba(255, 255, 255,0);
}
/* 未选中 */
swiper .wx-swiper-dot::before {
  width: 20rpx;
  height: 10rpx;
  content: '';
  border-radius: 5rpx;
 
  /* flex-grow:1; */
  background: rgba(255, 255, 255,0.3);
}
/* 选中 */
swiper .wx-swiper-dot-active::before {
  width: 30rpx;
  height: 10rpx;
  border-radius: 5rpx;
  background: rgba(255, 255, 255,1);
}

注意点：

（1）因为选中指示点和未选中的指示点大小不一样。所以未选中设置的width会小，

选中设置的width宽度和指示点本身大小是一样。

（2）因为未选中的宽度比较短。所以wx-swiper-dot要把背景设置完全透明

background: rgba(255, 255, 255,0);。这样未选中指示点样式宽度短，不会有多余背景露出了