微信小程序swiper自定义样式

最新推荐文章于 2025-06-23 17:17:27 发布

原创最新推荐文章于 2025-06-23 17:17:27 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序swiper

本文介绍了在原生Swiper中遇到的图片切换时圆角显示不一致的问题，以及如何通过设置`overflow:hidden`来解决这个问题。同时，分享了如何自定义指示点样式的技巧，包括修改`.swiper.wx-swiper-dot`的宽高和边框半径，以实现更美观的视觉效果。此外，提供了相应的CSS代码片段以供参考。

  <view class="swiper" >
    <swiper indicator-dots="true" circular autoplay interval="2000" duration="500" indicator-color='#ffffff' indicator-active-color="#0081FF" class="border">
      <block wx:for="{{image}}" wx:key="index">
        <swiper-item class="border">
          <view class="swiper-item {{item}}" class="border">
            <image src="{{item}}" alt="" class="border" />
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>

原生swiper的效果图

在这里插入图片描述

给最为元素和图片加入圆角切换时还会出现直角

在这里插入图片描述

解决方法 最外围元素加入overflow: hidden;实现切换圆角

在这里插入图片描述

指示点样式修改

通过.swiper .wx-swiper-dot修改

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

css 代码

.swiper {
  margin-top: 16rpx;
  width: 100%;
  height: 400rpx;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0px 3px 6px 1px #EFEEEE, inset 0px 3px 6px 1px #EFEEEE;
}

.border {
  width: 100%;
  height: 400rpx;
  border-radius: 8px 8px 8px 8px;
}

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