微信小程序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{
// 写定位
}
复制代码【微信小程序swiper小圆点默认样式改变】转载于:https://juejin.im/post/5b84b707f265da435a486244
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）