微信小程序swiper自定义面板指示

最新推荐文章于 2023-11-10 16:46:12 发布

前端开发小吴

最新推荐文章于 2023-11-10 16:46:12 发布

阅读量539

点赞数

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/ssorth/article/details/103629125

版权

微信小程序swiper自定义面板指示

<swiper class="swiper-box" indicator-active-color indicator-dots autoplay circular easing-function="linear">
      <swiper-item></swiper-item>
          </swiper>

样式如下

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 2rpx;
}

.swiper-box .wx-swiper-dot {
  width: 34rpx;
  display: inline-flex;
  height: 6rpx;
  /* margin-left: 0rpx; */
  justify-content: space-between;
}

.swiper-box .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(238, 238, 238, 1);
  border-radius: 3rpx;
  width: 18rpx;
  height: 6rpx;
}

.swiper-box .wx-swiper-dot-active::before {
  background: rgba(22, 186, 99, 1);
  width: 34rpx;
  height: 6rpx;
  border-radius: 3rpx;
}