微信小程序图片预览

      <view class="imgli" >
        <block wx:for="{{imgs}}" wx:key="vipo" >
          <view wx:if="{{imgs.length == 1}}"  bindtap="viewimg" >
            <image src="{{item}}" style='width:500rpx;height:500rpx;' data-imgs="{{imgs}}" data-index="{{index}}"></image>
          </view>
          <view wx:elif="{{imgs.length==0}}" >
            <image src="{{item}}" style="height:0rpx"  data-imgs="{{imgs}}" data-index="{{index}}"></image>
          </view>
          <view wx:elif="{{imgs.length==2 || imgs.length==4}}" bindtap="viewimg">
            <image src="{{item}}" style="width:300rpx;height:300rpx" data-imgs="{{imgs}}" data-index="{{index}}"></image>
          </view>
          <view wx:else  bindtap="viewimg">
            <image src="{{item}}" style='width:200rpx;height:200rpx' data-imgs="{{imgs}}" data-index="{{index}}"></image>
          </view>
        </block>
      </view>
    </view>


// data-变量名={{数据}}   会向js文件中传递对应的数据，data-imgs={{imgs}}就会把数组imgs传递到js文件中，data-index={{index}}同理



//如何预览图片，首先要知道点击的是哪张图片，然后获取这张图片的地址
// 因为图片地址是在数组imgs中，数组imgs中有多张图片，那么就需要获取这张图片的索引index
// 上面的wxml已经向js中传递了对应的数组imgs和index ，下面只需要调用就可以了



viewimg: function (event) {
    var that = this 

//   定义一个imgs接收wxml中被点击的数组imgs，index接收被点击的图片的index
//   src 来存储对应的imgs索引中的图片地址
    let imgs = event.target.dataset.imgs;
    let index = event.target.dataset.index;
    let src = imgs[index];
    wx.previewImage({

//  current是显示当前图片的地址，就是点击的那个图片的地址， urls 是要显示的图片的地址列表，就是数组imgs列表
      current:src,
      urls: imgs,
    })
  },