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

coldriversnow

已于 2023-11-17 09:12:58 修改

阅读量4.3k

点赞数 4

CC 4.0 BY-SA版权

文章标签：微信小程序 notepad++ 小程序

于 2023-11-10 16:46:12 首次发布

原文链接：https://www.yii666.com/blog/519237.html

本文详细介绍了如何使用Swiper组件调整指示点的颜色、形状、位置，以及如何自定义图片轮播图的样式，包括间距和选中点的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <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，注意中间，没有空格

自定义swiper点的样式图片样式

<!-- 轮播图 -->
<view class="sy_yfgg">
    <swiper indicator-dots="true" autoplay="true" interval="2000">
        <swiper-item>
            <image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
        </swiper-item>
        <swiper-item>
            <image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
        </swiper-item>
        <swiper-item>
            <image class="image" src="../../images/home_topback.png" mode="aspectFill"></image>
        </swiper-item>
    </swiper>
</view>

/* 设置swiper组件的宽高 */
.sy_yfgg swiper{width: 95%;height: 110rpx; margin: 15rpx auto; border-radius: 20rpx; overflow: hidden;}
/* 设置swiper组件里面图片的宽高 */
.sy_yfgg swiper image{width: 100%; height: 110rpx;border-radius: 20rpx;}
/* 修改dot形状 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot{width:8rpx;height:8rpx;border-radius:4rpx;background-color:#d8d9dd}
/* 修改dot之间的间距 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot:nth-of-type(n+2){margin-left:0rpx}
/* 修改选中dot形状 */
.sy_yfgg .wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active{width:24rpx;height:8rpx;border-radius:4rpx;background-color:#fff}
/* 调成dots的位置 */
.sy_yfgg .wx-swiper-dots.wx-swiper-dots-horizontal{bottom:10rpx;text-align:center}