wx.previewImage点击预览图片时总是从第一张显示；进阶需求：图片渲染展示缩略图，预览时展示高清图

1.wxml页面，注意这里data-index="{{item.index}}"

<view wx:for="{{list}}" wx:key="index">
	<image src="{{item.src}}" data-index="{{item.index}}" 
    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页面预览图片方法

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

解决。

问题：list是对象数组，会导致previewImage方法报错。

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

页面渲染使用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,
        })
    },

标签：index,walking,预览,展示,cdn,previewImage,data,图片
来源： https://blog.csdn.net/shanggui96/article/details/121496737