微信小程序图片预览

要求：需要能够批量查看图片，且每一张图片都可以放大缩小滑动查看

本来是准备通过自己来实现这个功能的，发现实现起来有点复杂，就看了一下官方文档，发现这个还是挺好用的。

36092146026785_.pic_hd.jpg

我们可以看到api需要两个参数，分别通过下面的data-list和data-src来传到js中

wxml代码：

<view wx:if="{{pictures}}" class="list-dImg">
<block wx:for="{{pictures}}" wx:key="picture.list">
<image mode="aspectFill" bindtap="previewImage"  src='{{item}}' data-list="{{pictures}}" data-src="{{item}}" lazy-load class='img-preview'></image>
</block>
</view>

js代码

//图片点击事件
  previewImage: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链接列表
  })
  }

1.给图片添加一个点击事件(previewImage)

2.使用event.currentTarget.dataset.自定义属性名称 来获取data-的值 如event.currentTarget.dataset.src (获取data-src的值)

3.之后将获取的两个值 放到wx.previewImage接口 里面即可

效果如下，可以放大缩小滑动，也可以左右滑动查看

36102146026810_.pic_hd.jpg