小程序轮播的小点的样式变化

 

     <!-- 轮播图区域   -->
    <view class="coursel">
        <swiper class='indexSwiper' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" circular='true'>
          <block wx:for="{{imgUrls}}" wx:key=''>
            <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>
    <!-- 轮播图区域   -->

css样式

.indexSwiper{
  width: 100%;
  height:470rpx;
}
 
.coursel{
  position: relative;
  width: 100%;
  height:470rpx;
}
.dots{ 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 20rpx; 
  display: flex; 
  justify-content: center; 
} 
.dots .dot{ 
  margin: 0 8rpx; 
  width:15rpx;
  height:6rpx;
  background:rgba(255,255,255,1);
  opacity:0.5;
  border-radius:1rpx;
  transition: all .6s; 
} 
.dots .dot.active{ 
  width:24rpx;
  height:6rpx;
  background:rgba(255,255,255,1);
  border-radius:1rpx;
}
 
swiper image {
  width: 100%;
}

    imgUrls: [
      '../../images/banner.jpg',
      '../../images/banner.jpg',
      '../../images/banner.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 4000,
    duration: 800,

  swiperChange(e) {
    const that = this;
    that.setData({
      swiperIndex: e.detail.current,
    })
  },

其实就自己编码一个轮播小点，然后根据轮播图的下标来修改小点的变化...........................................................

转载于:https://www.cnblogs.com/liujun1128/p/10730219.html