小程序——改变轮播图圆点样式

 

 

/*其实，正常情况下，没必要加.wrap,多余，但由于.dot要绝对定位到swiper上，而swiper中不能包裹其他的元素

（除了swiper-item)，所以只好加个.wrap用来约束.dot */

.wrap{

height: auto;

position: relative;

}

swipers{

height: 350rpx;

}

/*用来包裹所有的小圆点 */

.dots{

width: 400rpx;

height: 36rpx;

margin-top: 50rpx;

}

/*未选中时的小圆点样式 */

.dot{

width: 8rpx;

height: 8rpx;

border-radius: 50%;

margin-right: 26rpx;

background-color: #1F1202;

opacity:0.3;

float: left;

}

/*选中以后的小圆点样式 */

.active{

width: 24rpx;

height: 8rpx;

border-radius: 4rpx;

background-color: #1F1202;

opacity:1;

}

 

 

Page({

data: {

imgs: [

{ url: '../../images/banner.png' },

{ url: '../../images/banner.png' },

{ url: '../../images/banner.png' }

],

currentSwiper: 0,

autoplay: true

},

swiperChange: function (e) {

this.setData({

currentSwiper: e.detail.current

})

}

})