微信小程序：点击图片预览

做微信小程序的时候使用的图片大小不尽相同，为了让使用者能够浏览原图，就需要给图片添加点击预览的功能，下面我详细介绍一下实现步骤，

首先介绍微信小程序文档中的使用教程：

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html?search-key=%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87

下面是我具体实现代码

首先我在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链接列表
    })
  }

以上就是全部代码，下面是我实现的效果