uni-app点击预览图片

uni-app点击预览图片

在uni-app中已经提供了预览图片的方法uni.previewImage，直接调用就可以了

如果是类似轮播图，是固定是几张图片，直接获取图片就行
html代码

<!-- 轮播图开始 -->
<view class="lunbo">
	<swiper 
		:indicator-dots="true" 
		:autoplay="false" 
		:acceleration="false" 
		:interval="3000" 
		:duration="1000">
		<swiper-item v-for="(lunbo,index) in detail.lunboImg" :key="index">
			<view class="swiper-item">
				<img 
					:src="lunbo" 
					:data-src="lunbo"  
					@tap="previewImage(index)" 
					class="swiper-item-img">
			</view>
		</swiper-item>
	</swiper>
</view>
<!-- 轮播图结束 -->

methods: {
	//预览轮播图
	previewImage:function(index){
		var i = this.detailList[0].lunboImg; //获取当前页面的轮播图数据
		//uniapp预览轮播图
		uni.previewImage({
			current:index, //预览图片的下标
			urls:i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
		})
	}
}

如果是点击查看对应文字的图片，就要先将图片地址传到方法里面

html代码

<view class="SKU-title-img">
	<image 
		mode="aspectFit" 
		:src="imgUrl" 
		@tap="SKUpreviewImage(imgUrl,index)"
		class="title-img"></image>
</view>
<view class="color-name">
	<!-- 点击改变图片 -->
	<text 
		:class="activeColor == colorIndex ? 'active':''" 
		v-for="(color,colorIndex) in SKUList.color" 
		:key="colorIndex" 
		@click="colorImg(color[1],color[2],colorIndex)">{{color[0]}}</text>
</view>

js代码

data() {
	  imgUrl:''		//存放图片地址
	   };
	 },
methods: {
	//点击不同的颜色，改变图片地址
	colorImg:function(img){
		//定义一个变量
		var me = this;
		me.imgUrl = img;  //点击当前的颜色替换成当前颜色的图片
	},
	//SKU里面的图片预览
	SKUpreviewImage:function(image,index){
		//此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
		var arr = [];
		arr.push(image);
		//uniapp预览轮播图方法
		uni.previewImage({
			current:index, //预览图片的下标
			urls:arr //预览图片的地址，必须要数组形式
		})
	},
}