wx.previewImage点击预览图片时总是从第一张显示?添加index属性解决问题

1.wxml页面，注意这里data-index="{{item.index}}",添加src属性

<view wx:for="{{list}}" wx:key="index">
	<image src="{{item.src}}" data-index="{{item.index}}"  data-src="{{item.src}}"
    bindtap="previewImage"></image>
</view>

2.JS页面，data格式

data: {
    list: [
    {
      index: '0',
      src: "https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg"
    },
    {
      index: '1',
      src: "https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg"
    },
    ],
  },

3.JS页面预览图片方法,获取到src属性，直接用[ ]包裹，符合preview格式规范

 previewImage: function (e) {
        let imgList = this.data.list;
        let src = e.currentTarget.dataset.src
        let index = e.currentTarget.dataset.index
        wx.previewImage({
            // 当前显示图片的http链接
            current: imgList[index],
            // 需要预览的图片http链接列表
            urls: [src]
        })
    },

解决。

新问题：图片预览效果是点击一张图预览一张图，预览时没有左右切换图片功能，需要注意。

//

解决方案：重新定义另一个数组，里面存放符合格式规范的图片链接。实现页面显示缩略图、点击预览显示高清图的需求。

页面渲染使用list数组（存放缩略图地址），预览使用previewList数组（存放高清图地址），wxml页面代码不变

data:{
    list: [
    {
      index: '0',
      src: "https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg"
    },
    {
      index: '1',
      src: "https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg"
    },
    ],
    previewImageList: [
            'https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg',
            'https://cdn.stocksnap.io/img-thumbs/280h/city-walking_39NOIAL9TE.jpg'
    ]
}

previewImage: function (e) {
        let imgList = this.data.previewImageList;
        //通过点击事件传参获取点击的图片的index
        let index = e.currentTarget.dataset.index
        wx.previewImage({
            // 当前显示图片的http链接
            current: imgList[index],
            // 需要预览的图片http链接列表
            urls: imgList,
        })
    },