wxml:
注:也可以使用wx:for循环*
<swiper class="swiper" next-margin="124rpx" previous-margin="124rpx" current="{{currentItemId}}" bindchange="swiperChange" circular>
<swiper-item item-id="0" data-item-id="0" bindtap='clickChange'>
<view class='row'>
<view class='col {{currentItemId == 0 ? "selected" : ""}}'>
<image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
</view>
</view>
</swiper-item>
<swiper-item item-id="1" data-item-id="1" bindtap='clickChange'>
<view class='row'>
<view class='col {{currentItemId == 1 ? "selected" : ""}}'>
<image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
</view>
</view>
</swiper-item>
<swiper-item item-id="2" data-item-id="2" bindtap='clickChange'>
<view class='row'>
<view class='col {{currentItemId == 2 ? "selected" : ""}}'>
<image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
</view>
</view>
</swiper-item>
<swiper-item item-id="3" data-item-id="3" bindtap='clickChange'>
<view class='row'>
<view class='col {{currentItemId == 3 ? "selected" : ""}}'>
<image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
</view>
</view>
</swiper-item>
<swiper-item item-id="4" data-item-id="4" bindtap='clickChange'>
<view class='row'>
<view class='col {{currentItemId == 4 ? "selected" : ""}}'>
<image src="https://sucai.suoluomei.cn/sucai_zs/images/20191203142553-10e8e9b9f13c14b6ac3aa516a30802b.png"> </image>
</view>
</view>
</swiper-item>
<!-- </block> -->
</swiper>
<view class="dots">
<view class="dot{{0 == currentItemId ? ' active' : ''}}"></view>
<view class="dot{{1 == currentItemId ? ' active' : ''}}"></view>
<view class="dot{{2 == currentItemId ? ' active' : ''}}"></view>
<view class="dot{{3 == currentItemId ? ' active' : ''}}"></view>
<view class="dot{{4 == currentItemId ? ' active' : ''}}"></view>
</view>
js
page({
data:{
currentItemId: 1,//默认开始显示第几章轮播图,0为第一张开始
},
swiperChange: function (e) {
var currentItemId = e.detail.currentItemId;
this.setData({
currentItemId: currentItemId
})
},
clickChange: function (e) {
var itemId = e.currentTarget.dataset.itemId;
this.setData({
currentItemId: itemId
})
},
})
css
page {
padding-bottom: 96rpx;
box-sizing: border-box;
width: 100%;
height: 100%;
background: #222222;
}
.swiper, swiper {
width: 100%;
height: 100%;
}
.row {
width: 100%;
height: 100%;
box-shadow: 3rpx 4rpx 30rpx 8rpx #cccfd1;
display: flex;
align-items: center;
}
.title {
font-size: 36rpx;
text-align: center;
margin-bottom: 50rpx;
}
.col {
width: 500rpx;
margin: 0 auto;
height: 800rpx;
/* transform: scale(0.9); */
border-radius: 10rpx;
}
.col image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.selected {
/* transform: scale(1); *//* box-shadow: 0px 0px 20rpx 5rpx #CCC; */
}
.swiper-box {
position: relative;
width: 100%;
}
.dots {
position: absolute;
left: 0;
right: 0;
top: 70rpx;
display: flex;
justify-content: center;
}
.dots .dot {
margin: 0 8rpx;
width: 15rpx;
height: 15rpx;
background: #A7A7A7;
border-radius: 8rpx;
transition: all 0.6s;
}
.dots .dot.active {
/* width: 24rpx; */
background: #FFFFFF;
}