小程序swiper组件重置小圆点滑块指示器样式

1.代码



  
    
      
        
        
      
      
    
  

  
   
     
     
     
  

js

swiperChange: function (e) {
    // currentSwiper  滑动指示器
    console.log(e.detail.current);
    this.setData({
      currentSwiper: e.detail.current
    })
  },

css

/* 滑动指示器 */
/*用来包裹所有的小圆点 */
.dots {
 width: 156rpx;
 height: 36rpx;
 display: flex;
 flex-direction: row;
 /* position: absolute;
 left: 320rpx;
 bottom: 20rpx; */
}
/*未选中时的小圆点样式 */
.dot {
 width: 26rpx;
 height: 26rpx;
 border-radius: 50%;
 margin-right: 26rpx;
 background-color: white;
}
/*选中以后的小圆点样式 */
.active {
 width: 26rpx;
 height: 26rpx;
 background-color: coral;
}

官方参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

 

你可能感兴趣的:(微信小程序)