微信小程序 之wx.previewImage图片预览(多张图片预览)

wxml部分代码如下:

<block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'>
	<image class="wehx_picture" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image>
</block>

js部分代码如下:

var app = getApp();
Page({
data：{
	pictures: [
      'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
      'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
      'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'
    ],//已选择的图片临时路径数组
},
//图片预览
  previewImage:function(e){
    var index = e.currentTarget.dataset.index;
    var pictures = this.data.pictures;
    wx.previewImage({
      current: pictures[index], // 当前显示图片的http链接
      urls: pictures, // 需要预览的图片http链接列表
    
    })
  },
})

css部分代码如下:

.wehx_picture {
  width: 50rpx;
  height: 50rpx;
  margin-right: 14rpx;
}

最终效果如下：