微信小程序点击图片放大

在平时开发微信小程序图片列表中经常有图片点击放大查看的需求，今天我们就看看小程序是如何实现的呢

1.传参

<block wx:for="{{ImageArr}}" wx:key="index">
//previewImg： 点击的方法   
// data-imgUrl： 点击图片传递一个imgUrl的参数，该参数就是当前图片的地址
// data-arr   arr参数就是当前循环的图片集合
 <image src="{{item.ImageUrl}}" class="img" bindtap="previewImg" data-imgUrl="{{item.ImageUrl}}" data-arr="{{ImageArr}}"></image>
</block>

2.逻辑处理

 previewImg: function (e) {
 // 声明一个空的数组
    let arr = []
    // 循环传递过来的图片集合，将每一个图片都push到arr中，如果e.currentTarget.dataset.arr就是纯粹的图片集合可以直接赋值，如果是数组对象最好是循环将每一个图片添加到arr中
    e.currentTarget.dataset.arr.forEach(item => {
      arr.push(item.url)
    })
    wx.previewImage({
      current: e.currentTarget.dataset.imgurl, //当前图片地址
      urls: arr, //所有要预览的图片的地址集合 数组形式
      success: function (res) {},
      fail: function (res) {},
      complete: function (res) {},
    })
  }

如此就完成啦，是不是贼简单。