微信小程序---实现点击图片预览

单个图片

WXML

<image bindtap="preview" data-src="{{img}}"  src="{{img}}"></image>

JS

  preview(e){
    let img = e.currentTarget.dataset.src;
    let imgList = [];
    imgList.push(img);
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: imgList// 需要预览的图片http链接列表
    })
  }

多个图片–循环

WXML

imgObject ==>图片数组 对象
imgList ===> 图片数组

思路 直接传数组，方便操作

<image bindtap="preview" data-src="{{item.imgList}}" wx:for="{{imgObject}}"  src="{{item.imgList}}"></image>

JS

  preview(e){
    let imgList = e.currentTarget.dataset.src;
    wx.previewImage({
      current: imgList[0], // 当前显示图片的http链接
      urls: imgList// 需要预览的图片http链接列表
    })
  }