微信小程序 在新页面中全屏预览图片

wxml

<view class='imgList'>      
      <view class='imgList-li' wx:for='{{imgArr}}'>
        <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
      </view>
</view>

wxss

.imgList{
      width: 100%;
    }
    .imgList .imgList-li{
      width: 100%;
    }
    .imgList .imgList-li .img{
      width: 400rpx;
      height: 400rpx;
 }

js

Page({
      data: {
        imgArr:[
          'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
          'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
          'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
          'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
        ]
      },
      previewImg:function(e){
        console.log(e.currentTarget.dataset.index);
        var index = e.currentTarget.dataset.index;
        var imgArr = this.data.imgArr;
        wx.previewImage({
          current: imgArr[index],     //当前图片地址
          urls: imgArr,               //所有要预览的图片的地址集合 数组形式
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      }
    })

图片点击放大即wx.previewimage时会触发onhide，预览返回时会触发onshow

1). 首先在data中定义一个变量比如 preImgStatus: false

2). 在上述代码调用previewImage前加一个开关变量    this.setData({preImgStatus: true})

3). 在显示放大图片时触发的onhide函数中加上

if(this.data.preImgStatus == true) {
    this.setData({ preImgStatus: false}); 
    return;
}
//此处加上onhide真正需要处理的事件即可，onshow同理