微信小程序之swiper组件 自定义指示器样式

1.首先，需要在自定义的swiper组件外用一个父标签将该组件包裹起来，并赋予其类名。

/components/homeBanner/homeBanner.wxml

 <view class="swiper">
   <swiper indicator-dots="{{true}}"  autoplay="{{true}}" interval="{{4000}}" duration="{{400}}" circular="{{true}}">
      <swiper-item>
        1111
      </swiper-item>
      <swiper-item>
        2222
      </swiper-item>
      <swiper-item>
        3333
      </swiper-item>
    </swiper>
</view>

2.在swiper组件的js文件中设置如下操作：

/components/homeBanner/homeBanner.js

Component({
  options:{    // 使组件可以使用父级 的样式
    styleIsolation:"apply-shared"
  },
})

3.在需要引入该组件的页面中使用该组件，并设置swiper组件的样式

使用组件
/pages/home/home.wxml

<homeBanner></homeBanner>

设置swiper组建的样式
/pages/home/home.wxss

.swiper .wx-swiper-dot{
  width:30px;
  height:10px;
}
.swiper .wx-swiper-dot.wx-swiper-dot-active{
   background-color:orange;
}

欢迎关注：https://blog.csdn.net/HUI_WWW