修改小程序swiper 点的样式_小程序改变swiper的指示点的样式

wxml

css

.wrap {

height: auto;

position: relative;

width: 100%;

}

.swipers {

height: 350rpx;

width: 100%;

}

.slide-image {

display: block;

width: 100%;

height: 100%;

}

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

.dots {

width: 300rpx;

height: 5rpx;

display: flex;

flex-direction: row;

position: absolute;

/* left: 320rpx; */

background: #000;

bottom: 20rpx;

}

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

.dot {

width: 100rpx;

height: 5rpx;

/* border-radius: 50%; */

/* margin-right: 26rpx; */

/* background-color: white; */

}

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

.active {

width: 100rpx;

height: 5rpx;

background-color: coral;

}

js

Page({

data: {

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

],

currentSwiper: 0,

autoplay: true

},

swiperChange: function (e) {

this.setData({

currentSwiper: e.detail.current

})

}

})