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