修改小程序swiper组件面板指示点的样式大小颜色和点之间距离

大大。

已于 2022-09-15 17:47:37 修改

阅读量2k

点赞数 1

分类专栏：小程序文章标签：前端 css html

于 2022-09-15 16:53:12 首次发布

本文链接：https://blog.csdn.net/weixin_43923808/article/details/126874806

版权

微信小程序 swiper CSS样式指示点位置调整

关键词由CSDN通过智能技术生成

小程序专栏收录该内容

47 篇文章 3 订阅

订阅专栏

 <swiper class="swiper-wrap" indicator-dots="{{indicatorDots}}" autoplay="{{autoplaySwipe}}" duration="{{duration}}" interval="{{interval}}" indicator-active-color="#393835" circular="{{circular}}" bindchange="changeSwiper" style="height:{{imgHeight}}rpx">
  <swiper-item>
  </swiper-item>
    </swiper>

.swiper-wrap .wx-swiper-dot {
  width: 10rpx; /*点的长*/
  height: 10rpx; /*点的高*/
  display: inline-flex;

  margin-left: -10rpx; /* 修改点之间的间距 ，我这里挨的近为负数，分开点数值加大*/
  justify-content: space-between;
}
.swiper-wrap .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: white; /*点的未选中颜色*/
  border-radius: 50%;//圆角
}
.swiper-wrap .wx-swiper-dot-active::before {
  background: #cccccc; /*点的选中颜色*/
  width: 10rpx; /*点的长*/
  height: 10rpx; /*点的高*/
}

效果如图：

也可以改变点的位置。居中或者左下角右下角（按需加）

/* 调成dots的位置 */
/* 顶部 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 40rpx;
}
/* 中间 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 50%;
}
/* 右下角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  width: 90%;
  text-align: right;
}
/* 左下角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  width: 90%;
  text-align: left;
}
/* 左上角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 40rpx;
  width: 90%;
  text-align: left;
}
/* 右上角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 40rpx;
  width: 90%;
  text-align: right;
}

如下图：