- 为轮播图绑定点击事件
- 将轮播图index传给自定义事件
<!-- 轮播图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
<swiper-item v-for="(item, index) in goodsInfo.pics" :key="item.pics_id">
<image :src="item.pics_big" @click="preview(index)"></image>
</swiper-item>
</swiper>
// 大图预览
preview(index) {
// 调用uni.previewImage()方法,传递index
uni.previewImage({
current: index,
// 返回所有图片的url地址数组
urls: this.goodsInfo.pics.map((item) => item.pics_big)
});
}
文章来源地址https://www.toymoban.com/news/detail-601953.html
文章来源:https://www.toymoban.com/news/detail-601953.html
到了这里,关于uniapp实现轮播图大图预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!