【微信小程序】swiper自定义样式：指示点样式 wx-swiper-dot

sayyy

已于 2022-09-23 11:34:02 修改

阅读量6k

点赞数 10

分类专栏：微信小程序文章标签：微信小程序小程序

于 2022-09-22 15:40:33 首次发布

本文链接：https://blog.csdn.net/sayyy/article/details/126991710

版权

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

53 篇文章

订阅专栏

前言

调试基础库：2.26.0

swiper

    <view class="swiper">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>

swiper 样式

.wx-swiper-dots ：指示点容器样式
.wx-swiper-dots-horizontal ：水平滑动的指示点容器样式，其在.wx-swiper-dots内。
.wx-swiper-dot ：指示点样式
.wx-swiper-dot-active ：当前指示点样式

指示点颜色

默认指示点颜色
在这里插入图片描述
改变指示点颜色

.swiper .wx-swiper-dot {
  background-color: rgba(255,255,255,0.7);
}
.swiper .wx-swiper-dot-active {
  background-color:#ff4e5b;
}

在这里插入图片描述

指示点形状

默认指示点形状
在这里插入图片描述
改变指示点形状

.swiper .wx-swiper-dots-horizontal .wx-swiper-dot {
  width: 45rpx;
  height: 8rpx;
  border-radius: 5rpx;
}

在这里插入图片描述

指示点位置

默认指示点位置贴近底部
在这里插入图片描述
改变指示点位置

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  bottom: 40rpx;
}

.wx-swiper-dots.wx-swiper-dots-horizontal，注意中间，没有空格

或者

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

.wx-swiper-dots.wx-swiper-dots-horizontal，注意中间，没有空格

参考

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
https://blog.csdn.net/qq_39399966/article/details/113342668
https://blog.csdn.net/IT_iosers/article/details/123922736
https://wangjiabin.blog.csdn.net/article/details/108194235
https://blog.csdn.net/weixin_42063951/article/details/111059699