轮播图tab切换，点击图片预览放大，长按删除图片

效果图：

点击需求按钮，展示需求板块对应的轮播图内容以及图片

点击资源按钮，展示资源板块对应的轮播图内容以及图片

 

点击图片放大预览效果

长按图片删除效果

 

 

代码如下 ：

<template>
	<view>

		<view class="content">
			<view class="requir" @click="changeSwiper(1)" :style="{'backgroundColor':NeedColor}">
				需求
			</view>
			<view class="resource" @click="changeSwiper(2)" :style="{'backgroundColor':SourceColor}">
				资源
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" autoplay="true" interval="3000" duration="1000" indicator-active-color="white"
			indicator-dots="true">
			<swiper-item v-for="(item,index) in swiperArr" :key="index" @click="popUp(index)"
				@longtap="onLongPress(index,item.url)">
				<image class="swiper-red-box" :src="item.url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				NeedColor: '#b0b0b0',
				SourceColor: '#1c9273',
				showindex: 0,
				popUpTitle: "资源",
				index: 0,
		
				// 需求图片
				requireArr: [{
						url: 'https://qiniu.chinardr.net/v2/img/greyImg.png'
					},
					
				],

				// 资源图片
				resourcesArr: [{
						url: 'https://qiniu.chinardr.net/v2/img/deepBlueimg.png'
					},
					
				],

				// 轮播图渲染的图片
				swiperArr: [{
					url: 'https://qiniu.chinardr.net/v2/img/deepBlueimg.png'
				}],
			}
		},
		methods: {
	        //点击需求和资源按钮触发的方法
			changeSwiper(index) {
				this.index = index  //index是从上边传过来的参数
				// 根据需求和资源的变化来改变对应按钮和背景的颜色 
				if (this.NeedColor === '#b0b0b0' && index !== 2) {
					this.NeedColor = '#1c9273'
					this.SourceColor = '#b0b0b0'
					this.popUpTitle = '需求'
				} else if (this.SourceColor === '#b0b0b0' && index !== 1) {
					this.NeedColor = '#b0b0b0'
					this.SourceColor = '#1c9273'
					this.popUpTitle = '资源'
				}

				if (index == 1) {
					this.swiperArr = this.requireArr;
				} else if (index == 2) {
					this.swiperArr = this.resourcesArr;
				}
			},

			// 点击图片放大预览方法
			popUp(index) {
				// 第一种方法
				// let img=this.swiperArr.map(item=>{
				// 	return item.url
				// })
				// uni.previewImage({
				// 	current: index, //点击图片当前的下标
				// 	urls: img,       //当前所有图片的路径
				// })

				// 第二种方法
				let previewArr = []
				for (var i = 0; i < this.swiperArr.length; i++) {
					let a = this.swiperArr[i].url
					console.log(a);
					previewArr.push(a)
				}
				uni.previewImage({
					current: index, //点击图片当前的下标
					urls: previewArr, //当前所有图片的路径
				})
			},

			// 长按删除方法
			onLongPress(index,url){  //index是从上边传过来的下标，url是每一个图片的路径
				let that=this
				console.log(index);
				console.log(url);
				uni.showModal({    // 弹框询问是否进行下一步事件
				        title: '提示',
				        content: '是否删除该图片',
				        success: function(res) {
				            if (res.confirm) {
				                console.log('用户点击确定',res);
								that.swiperArr.splice(index, 1);
				            } else if (res.cancel) {
				                console.log('用户点击取消');
				                return
				            }
				        }
				    });
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		justify-content: space-evenly;

		.requir {
			text-align: center;
			color: aliceblue;
			font-size: 14px;
			border-radius: 20%;
			width: 50px;
		}

		.resource {
			width: 50px;
			text-align: center;
			color: aliceblue;
			font-size: 14px;
			border-radius: 20%;
		}
	}

	.swiper {
		width: 100%;

		.swiper-red-box {
			width: 100%;
		}
	}
</style>