uniapp 预览图片，看这些你必定会

场景，在项目中有点击图片预览的需求。

1）点击当前图片，查看当前图片大图。

<view v-if="worktype=='image'" class="imglist">  <image class="imagew" mode="widthFix"    v-for="(item, index) in itemData.works" :key="index"    :src="item.works_url" @click="clickImg(item)"></view>//methodsclickImg(item){  // 预览图片  uni.previewImage({    urls: [item.works_url],    current: '', // 当前显示图片的http链接，默认是第一个    success: function(res) {},    fail: function(res) {},    complete: function(res) {},  });}

2）点击当前图片，显示当前图片，并且可以左右滑动，预览其他图片

<image class="imagew" mode="widthFix"v-for="(item, index) in itemData.works" :key="index" :src="item.works_url" @click="clickImg(itemData.works,index)">   // 方法：methods  clickImg(works,index){				// 预览图片				console.log(JSON.stringify(works) +"ffffff"+index)				// [{"id":"260","works_url":"ject/36/20211014/41687800716329264"}          //{"id":"261","works_url":"ject/36/20211014/41687800716329264"}, // {"id":"262","works_url":"ject/36/20211014/41687800716329264"}]ffffff0	//vue遍历数组对象，存到一个新的数组里面			  var str = "";				works.forEach( (item)=>{					str += item.works_url + ",";				});				str = str.substring(0, str.length-1);				this.newArrImage = str.split(",");    ////vue遍历数组对象，存到一个新的数组里面 end				uni.previewImage({					urls: this.newArrImage,					current: index, // 当前显示图片的http链接，默认是第一个										success: function(res) {},					fail: function(res) {},					complete: function(res) {},				});}

forEach实例

data() {    return {      arr: [        { name: "a", age: 1 },        { name: "b", age: 2 },        { name: "c", age: 3 }      ],      newArr: []    }; },mounted(){	var str = "";	this.arr.forEach(function(e) {		str += e.name + ",";	});	str = str.substring(0, str.length-1);	this.newArr = str.split(",");	window.console.log(str); 	// 输出: a,b,c	window.console.log(this.newArr); 	// 输出: ["a","b","c"]}