微信小程序:点击图片预览
做微信小程序的时候使用的图片大小不尽相同,为了让使用者能够浏览原图,就需要给图片添加点击预览的功能,下面我详细介绍一下实现步骤,
首先介绍微信小程序文档中的使用教程:
下面是我具体实现代码
首先我在wxml中给图片绑定的点击预览事件,以及自定义属性
之后在JS文件重定义了点击事件
//图片点击事件
imgYu: function (event) {
var src = event.currentTarget.dataset.src;//获取data-src
var imgList = event.currentTarget.dataset.list;//获取data-list
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
}
以上就是全部代码,下面是我实现的效果