微信小程序解决图片预览api，urls有重复图片时，点击后续重复同一图片会把前面图片去除的问题

循环完后数据应该是

arr：['/static/del.png'，'/static/dz.png'，'/static/dz.png'，'/static/wjx.png'，'/static/dz.png'...]

这个时候点击第一张图片 上面显示的位置是 1/10 点击第二张的时候是2/10 都是正常的，但是点击第三张图片的时候

点击第十张图片的时候

回头去看uniapp里面api的描述

传索引值，在微信/百度/抖音小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。

微信原生方法wx.previewImage里面其实也有类似的问题，current传入url地址选中图片，如果有一样的图片的时候也会默认选择第一次出现的位置，但是不会过滤图片同样的数组 用wx的方法时，选择第二张第三张的时候 都是2/10，不会有3/10

解决办法

listClick(index) {
				let arr = []
				for (let i = 0; i < 10; i++) {
					if (i == 0) {
						arr.push('/static/del.png'+'?'+i)
					} else if (i == 3) {
						arr.push('/static/wjx.png'+'?'+i)
					} else {
						arr.push('/static/dz.png'+'?'+i)
					}
				}
				uni.previewImage({
					urls: arr,
					current: index,
				})
			},

给每个图片最后加上对应下标，?后拼接内容不会影响渲染，这个方法也可以解决浏览器缓存，可以拼接完下标后再加&拼接时间戳，用这个方法的时候比较推荐用uni的api，用微信的api时 选中图片的current需要传入链接地址，所以在遍历的时候 要多一层判断 给一个url赋值

listClick(index) {
				let arr = []
				let url = ''
				for (let i = 0; i < 10; i++) {
					if (i == 0) {
						arr.push('/static/del.png' + '?' + i)
					} else if (i == 3) {
						arr.push('/static/wjx.png' + '?' + i)
					} else {
						arr.push('/static/dz.png' + '?' + i)
					}
					if (i == index) {
						url = '/static/dz.png' + '?' + i
					}
				}
				wx.previewImage({
					urls: arr,
					current: url,
				})
			},

此时选中第十张图片，完美解决问题

需要时间戳解决浏览器缓存的，自己在后面加入时间戳就好了

注意

我写的这个渲染加图片的方法只作为一个效果展示，实际千万别这样去用。图片会渲染不出来的，因为图片地址不对，方法会找不到这张图片，我只是单纯的懒，实际你们肯定要考虑自己的图片地址问题的，我只是单纯的懒，所以就这样去写了，主要看的是图片的展示位置是否正确，这组代码是写在公司项目里面的，项目代码和线上图片这些是不能展示出来的