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

小程序图片点击全屏.gif

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.jsPage({  /**   * 页面的初始数据   */  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    })  },})

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

原著是一个有趣的人,若有侵权,请通知删除