1.轮播图的小圆点默认样式为黑灰色,达不到我们的需求。改变默认样式...
<view class="swiper-container">
<swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="this">
<swiper-item>
<image src="{{item}}" class="slide-image"></image>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{slider}}" wx:key="this">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
复制代码
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 显示图片计数 当前/总数
<view class="swiper-container">
<swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="center" />
</swiper-item>
</block>
</swiper>
<view class="imageCount">{{swiperCurrent+1}}/{{imgUrls.length}}</view>
</view>
复制代码
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 显示图片计数 当前/总数 与 点击切换图片
<view class="swiper-container">
<swiper class="swiper" interval="5000" duration="500" circular="true" current="{{swiperCurrent}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="center" />
</swiper-item>
</block>
</swiper>
<view class="imageCount">{{swiperCurrent+1}}/{{imgUrls.length}}</view>
<button class="prev" bindtap='bindPrev' wx:if="{{isPrev}}">
<image class="icon" src="" />
</button>
<button class="next" bindtap='bindNext' wx:if="{{isNext}}">
<image class="icon" src="" />
</button>
</view>
复制代码
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{
// 写定位
}
复制代码