uniapp-轮播图点击预览功能

爱健身的小刘同学2023-11-18 9:34

实现效果

点击后打开预览图

实现代码

javascript 复制代码

<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的钩子内去加上转换的代码

javascript 复制代码

this.newBannerList = newList.map(item => this.baseUrl + item);

this.baseUrl是基地址