uni-app点击预览图片

た入场券 2023-06-30 08:57 8阅读 0赞

## 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 //预览图片的地址，必须要数组形式
    		})
    	},
    }