小程序之修改輪播圖的小點樣式

小程序之修改輪播圖的小點樣式

一、單獨寫一個小點的元素。

<view class='swiper-box'>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">  
      <block wx:for="{{imgUrls}}" wx:key="unique">  
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>  
      </block>  
    </view>
  </view>

　　

二、將輪播圖組件自帶的小點隱藏

indicatorDots: false

　　

三、修改樣式

swiper{
  width: 100%;
}

.swiper-box{
  position: relative;
  width: 100%;
}
.dots{  
  position: absolute;  
  left: 0;  
  right: 0;  
  bottom: 20rpx;  
  display: flex;  
  justify-content: center;  
}  
.dots .dot{  
  margin: 0 8rpx;  
  width: 14rpx;  
  height: 14rpx;  
  background: #fff;  
  border-radius: 8rpx;  
  transition: all .6s;  
}  
.dots .dot.active{  
  width: 24rpx;  
  background: #f80;  
} 

swiper image {
  width: 100%;
  height: 100%;
}