微信小程序中自定义修改Swiper组件的面版指示样式【学习记录】

最新推荐文章于 2025-03-07 09:10:43 发布

梨童就是小梨童呀

最新推荐文章于 2025-03-07 09:10:43 发布

阅读量1k

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_42220039/article/details/126115400

版权

小程序专栏收录该内容

11 篇文章

订阅专栏

这篇博客分享了如何修改微信小程序中swiper组件的指示点样式，通过自定义.wx-swiper-dots和.wx-swiper-dot的CSS样式，实现个性化面板指示效果。博主提供了具体的WXML和WXSS代码示例，并提醒注意，如果swiper是组件，样式需在父组件的.wxss中定义才生效。

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

在最近的开发中，遇到了需要修改小程序组件swiper面版指示样式，如下图所示，谨以此记录学习，欢迎大家一起学习进步。
在这里插入图片描述

话不多说，直接上代码，有需要的小伙伴码住，可以适当调整代码改正自己想要的面版样式。

实现解决方案，自定义indicator-dots样式

实现方法： 通过改变.wx-swiper-dots 和.wx-swiper-dot 的样式来修改。

wxml

 <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>

wxss

swiper .wx-swiper-dots .wx-swiper-dot{
  margin-bottom: -10rpx !important;
}
swiper .wx-swiper-dots{
  background: rgba(0,0,0,.55);
  border-radius: 50rpx;
  margin-bottom: 80rpx;
  padding: 10rpx 30rpx 20rpx;
}

可根据自己需要可以自定义.wx-swiper-dot 和.wx-swiper-dots样式实现自己想要的样式，一起加油
特别提醒：
如果swiper是component组件，在swiper.wxss里面写.wx-swiper-dots 和.wx-swiper-dot样式是不会生效的，一定要在父组件的.wxss里面写这样才可以生效哦