修改小程序swiper 点的样式_微信小程序swiper小圆点默认样式改变

1.轮播图的小圆点默认样式为黑灰色，达不到我们的需求。改变默认样式...

复制代码

js

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'

],

swiperCurrent: 0

},

swiperChange: function (e) {

let that = this;

that.setData({

swiperCurrent: e.detail.current

})

},

复制代码

css

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .slide-image{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

left: 0;

right: 0;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 8rpx;

width: 14rpx;

height: 14rpx;

background: #fff;

border-radius: 8rpx;

transition: all .6s;

}

.swiper-container .dots .dot.active{

width: 24rpx;

background: #f80;

}

复制代码

结果如图：

2.微信小程序 swiper 显示图片计数 当前/总数

{{swiperCurrent+1}}/{{imgUrls.length}}

复制代码

js

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'

],

swiperCurrent: 0

},

swiperChange: function (e) {

let that = this;

that.setData({

swiperCurrent: e.detail.current

})

}

复制代码

css

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .slide-image{

width: 100%;

height: 100%;

}

.imageCount{

width: 80rpx;

height: 80rpx;

background-color: #c5c5cc;

border-radius: 50%;

line-height: 78rpx;

color: #ffffff;

text-align: center;

font-size: 26rpx;

position: absolute;

right: 26rpx;

bottom:20rpx;

}

复制代码

结果如图：

3.微信小程序 swiper 显示图片计数 当前/总数 与 点击切换图片

{{swiperCurrent+1}}/{{imgUrls.length}}

复制代码

js

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'

],

swiperCurrent: 0,

isNext: false,

isPrev: false,

},

swiperChange: function (e) {

let that = this;

that.setData({

swiperCurrent: e.detail.current

})

if (e.detail.current === this.data.imgUrls.length - 1) {

this.setData({

isNext: false

})

} else {

this.setData({

isNext: true

})

}

if (e.detail.current !== 0) {

this.setData({

isPrev: true

})

} else {

this.setData({

isPrev: false

})

}

},

bindNext: function () {

let swiperCurrent = this.data.swiperCurrent;

swiperCurrent++

this.setData({

swiperCurrent: swiperCurrent

})

if (swiperCurrent === this.data.imgUrls.length - 1) {

this.setData({

isNext: false

})

}

if (swiperCurrent !== 0) {

this.setData({

isPrev: true

})

}

},

bindPrev: function () {

let swiperCurrent = this.data.swiperCurrent;

swiperCurrent--

this.setData({

swiperCurrent: swiperCurrent

})

if (swiperCurrent !== this.data.imgUrls.length - 1) {

this.setData({

isNext: true

})

}

if (swiperCurrent === 0) {

this.setData({

isPrev: false

})

}

},

onLoad: function(){

if (this.data.imgUrls.length > 1) {

this.setData({

isNext: true

})

}

}

复制代码

css

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

.swiper-container .swiper .slide-image{

width: 100%;

height: 100%;

}

.imageCount{

width: 80rpx;

height: 80rpx;

background-color: #c5c5cc;

border-radius: 50%;

line-height: 78rpx;

color: #ffffff;

text-align: center;

font-size: 26rpx;

position: absolute;

right: 26rpx;

bottom:20rpx;

}

.swiper-container .prev{

// 写定位

}

.swiper-container .next{

// 写定位

}

复制代码