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

在最近的开发中，遇到了需要修改小程序组件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里面写 这样才可以生效哦