小程序中图片点击全屏-可滑动

在小程序中，如果页面中有多张图片，那么用户可能会习惯向在朋友圈中一样打开图片，这里微信也提供了类似的api，可以直接拿来实现这个效果。

wxml:

<view>
  <block wx:for="{{arrImg}}" wx:key="{{key}}">
    <image 
    src="{{item}}" 
    bindtap='previewimgs' 
    data-img="{{item}}" 
    mode="aspectFill"
    ></image>
  </block>
</view>

wxss:

/* perviewimg/perviewimg.wxss */
view{
  text-align: center;
}
image{
  width: 200rpx;
  height: 200rpx;
  margin: 10rpx;  
}

js:

// perviewimg/perviewimg.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    arrImg: ['http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38d473.jpeg-smimage',
      'http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38d826.jpeg-smimage',
      'http://images.cdn.huiur.com/files/track/2019-07-16/img/img_5d2d47e38e924.jpeg-smimage'
    ]
  },
  previewimgs: function(e) {
    var currentImg = e.currentTarget.dataset.img;
    console.log(currentImg);
    wx.previewImage({
      current: currentImg, // 当前显示图片的http链接 String
      urls: this.data.arrImg // 需要预览的图片http链接列表 Array
    })
  },
})

微信官方文档链接：在新页面中全屏预览图片