微信小程序 图片列表 预览

使用data-  携带数据，以便于在js中可以直接的拿到自己需要的图片路径,少走弯路

 

wxml

<image wx:for="{{filePic}}" wx:key="index" src="{{fileUrl+item.url}}" style="height:{{canvasHeight}};width:{{canvasWidth}}"  bindtap="previewImage" data-page='{{item.page}}' data-index='{{index}}' data-src='{{fileUrl+item.url}}'></image>

js（预览方法）

//预览图片，放大预览
  previewImage: function (e) {
    console.log("预览");
    var that = this;
    console.log('点击图片携带的数据：', e.currentTarget);
    // console.log('点击图片携带的下标：', e.currentTarget.dataset.index);  //当前的点击的图片
    // console.log(that.data.filePic); //图片列表
    var picslist = that.data.filePic;
    
    // 方式1：传下标
    // var index =  e.currentTarget.dataset.index;
    // let currentUrl = that.data.fileUrl+picslist[index].url;

    // 方式2：传图片路径
    let currentUrl = e.currentTarget.dataset.src;
    wx.previewImage({
      current: currentUrl, // 当前显示图片的http链接
      urls: picslist.map(v => (that.data.fileUrl + v.url)), // 需要预览的图片http链接列表
    })
  },

这里有个小知识点，因为我的列表有一层canvas遮罩，所以图片列表点击事件无法触发，

故给遮罩层加了这个属性  pointer-events:none

链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events