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

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

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

微信小程序官方文档: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链接列表
    })
  }

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

猜你喜欢

转载自blog.csdn.net/qq_41725450/article/details/85112955