修改小程序swiper小圆点的默认样式(内含只有一条数据时不显示小圆点)

最新推荐文章于 2024-04-22 15:37:24 发布

性野喜悲

最新推荐文章于 2024-04-22 15:37:24 发布

阅读量1k

点赞数 1

分类专栏：小程序学习经验分享

本文链接：https://blog.csdn.net/leng0920/article/details/107405194

版权

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

小程序学习

3 篇文章 0 订阅

订阅专栏

只有一条数据时不显示小圆点

 <swiper indicator-dots="{{getWallList.length>1 ? true : false}}">

<!--getWallList为自己定义的数组或后台返回的数组-->

 <swiper-item  wx:for="{{getWallList}}" wx:key="index">{{item}}</swiper-item>

</swiper>

修改小圆点默认样式

/* 设置小圆点的层级 ,可以调整小点的位置*/
.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  top: 240rpx;
  /* left: 500rpx; */
  /* z-index可设可不设*/
  z-index: 888;
}
 
/* 设置小圆点的样式 */
.swiper .wx-swiper-dot {
  width: 35rpx;
  height: 7rpx;
  display: inline-flex;
  /* 这里设置小圆点之间的距离 */
  margin-left: 19rpx;
  justify-content: space-between;
}
 
 /* 当前小圆点的样式 */
.swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #ffffff;
}
 
/* 当前选中小圆点的样式 */
.swiper .wx-swiper-dot-active::before {
  background: #000;
}