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

妖狐艹你老母 2022-04-03 03:14 554阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70][]

微信小程序官方文档：[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][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中给图片绑定的点击预览事件，以及自定义属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1][]

之后在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链接列表
        })
      }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70]: /images/20220403/80fab44763b34eb8af091ad8df974f88.png
[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]: 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
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 1]: /images/20220403/1d5e8f329f484da0b0bf000540701825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 2]: /images/20220403/bad1b7952eb24d5896aad72e9f45b45a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzI1NDUw_size_16_color_FFFFFF_t_70 3]: /images/20220403/07f535000a094eac87700eaa410c8f93.png