当前位置:首页 > 编程笔记 > 正文
已解决

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 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!