小程序自定义轮播图indicator-dots

首先，在 indicator-dots 在 swiper 组件里默认为false。所以自定义的时候并不需要设置它。

一开始我想用 cover-view 来实现他的展示以及一些样式，但是 cover-view 定位后，在页面滚动的时候会出现bug。然后发现 view 就可以，，，，浪费时间

<view class="swiper">

    <view class="indicatorDots">
	<block wx:for='{{swiper}}' wx:key='index'>
	    <view class="{{current==index?'swiper-dot':'swiper-dots'}}"></view>
	</block>
</view>

 

    <swiper bindchange="swiperChange">
	<block wx:for='{{swiper}}' wx:key='index'>
		<swiper-item>
			<image src="{{item}}"></image>
		</swiper-item>
	</block>
    </swiper>

</view>

　　

.swiper{
  height: 350rpx;
  position: relative;
}

.swiper  .indicatorDots{
  position: absolute;
  height: 8rpx;
  z-index: 99;
  bottom: 50rpx;
  display: flex;
  justify-content: space-around;
  left: 50%;
  transform: translateX(-50%);
}

.swiper  .indicatorDots view{
  height: 8rpx;
  margin: 0 8rpx;
  transition: .5s;
}

.swiper .swiper-dots{
  width: 26rpx;
  height: 8rxp;
  background-color: #e1dfdf;
  border-radius: 8rpx;
}

swiper .swiper-dot{
  width: 40rpx;
  height: 8rxp;
  border-radius: 8rpx;
  background-color: #b5b5b5;
} 

　　

data:{
  swiper:[url1,url2,url3] ,
  current:0,
}

swiperChange:function(e){
 const current=e.detail.current;
  this.setData({
   current  
   })  
}

使用 bindchange 获取当前轮播图的节点 current 。通过判断 current 于 index 是否相等切换样式即可