其他分享
首页 > 其他分享> > wx.previewImage点击预览图片时总是从第一张显示;进阶需求:图片渲染展示缩略图,预览时展示高清图

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