已解决
uniapp-轮播图点击预览功能
来自网友在路上 183883提问 提问时间:2023-11-19 00:26:55阅读次数: 83
最佳答案 问答题库838位专家为你答疑解惑
实现效果
点击后打开预览图
实现代码
<swiper v-if="this.bannerList.length >= 1" class="swiper" autoplay="true" duration="500" interval="2000" @change="changeSwiper"><swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index"><image class="img" :src="baseUrl+item" mode="" @click="handleBanner(index)"></image></swiper-item>
</swiper>methods: {handleBanner(index) {uni.previewImage({current: index, //预览图片的下标urls: this.newBannerList //预览图片的地址,必须要数组形式})},
},
因为我的 bannerList 数组内是存的去除了基地址的地址 所以直接写在urls 后是无法显示的 这里需要的是全路径
所以在created 或mounted的钩子内去加上转换的代码
this.newBannerList = newList.map(item => this.baseUrl + item);
this.baseUrl 是基地址
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"uniapp-轮播图点击预览功能":http://eshow365.cn/6-38783-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!