uniApp中swiper和预览图片的一起使用

uniApp中swiper和预览图片的一起使用

1.使用swiper实现轮播图效果

1.准备代码

<template>
	<swiper >
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiperImage" :circular="true">
			<img :src="item.url"/>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import { ref } from 'vue'
	const imageUrlList = ref([
		{
			id: '1',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg'
		},
		{
			id: '2',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg'
		},
		{
			id: '3',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg'
		},
		{
			id: '4',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg'
		},
		{
			id: '5',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg'
		}
	])
</script>

• :indicator-dots 是否显示面板指示点
• :autoplay 是否自动切换
• :interval 自动切换时间间隔
• :duration 滑动动画时长
• :circular 是否采用衔接滑动，即播放到末尾后重新回到开头

2.以上代码可以实现轮播图的效果了

接下来实现点击图片实现预览图片的效果

2.使用uni.previewImage实现图片预览效果

1.给每个图片添加点击事件，参数为item也可以直接为item.url,我这里使用的是item

	<swiper-item v-for="item in imageUrlList" :key="item.id">
			<img :src="item.url" @click="previewImage(item)" />
		</swiper-item>

事件处理函数

function previewImage(item) {
		uni.previewImage({
			urls: imageUrlList.value.map((item) => item.url),
			current: item.url
		})
	}

uni.previewImage参数解释：

• urls：需要预览的图片链接列表
• current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张 这里我使用的是链接

3.完整代码

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiperImage" :circular="true">
		<swiper-item v-for="item in imageUrlList" :key="item.id">
			<img :src="item.url" @click="previewImage(item)" />
		</swiper-item>
	</swiper>
</template>

<script setup>
	import { ref } from 'vue'
	const imageUrlList = ref([
		{
			id: '1',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg'
		},
		{
			id: '2',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg'
		},
		{
			id: '3',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg'
		},
		{
			id: '4',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg'
		},
		{
			id: '5',
			url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg'
		}
	])
	function previewImage(item) {
		uni.previewImage({
			urls: imageUrlList.value.map((item) => item.url),
			current: item.url
		})
	}
</script>

<style scoped lang="scss">
	.swiperImage {
		width: 750rpx;
		height: 300rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>