![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1c03508cd73a6d15a85f510d1c0e5a58.png)
// bindchange='onSlideChange' 滑动时触发
// bindtap="bigImg"点击图片预览
<!-- 轮播图 -->
<swiper autoplay circular="true" bindchange='onSlideChange'>
<swiper-item wx:for="{{data.imagess}}" wx:key="{{index}}">
<image src="{{item}}-img" bindtap="bigImg"></image>
</swiper-item>
</swiper>
<view class="num">{{lunboindex}}/{{data.imagess.length}}</view>
// 轮播图滑动时触发,当前页索引改变
onSlideChange(e) {
this.setData({
lunboindex: e.detail.current + 1
})
},
// 点击图片预览
bigImg(e) {
wx.previewImage({
urls: this.data.data.imagess,
})
},
swiper {
width: 100%;
height: 640rpx;
swiper-item {
image {
width: 100%;
height: 100%;
}
}
}
.num {
position: absolute;
top: 580rpx;
right: 20rpx;
width: 92rpx;
height: 42rpx;
background: rgba(255, 255, 255, 1);
opacity: 0.8;
border-radius: 21rpx;
text-align: center;
line-height: 42rpx;
}