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,
})
},