【微信小程序】wx.previewImage查看图片后返回时重新加载页面问题

微信小程序在做图片预览时,发现点击图片预览,onShow中的所有接口都重新调用了一遍,整个界面都刷新了,还会引发一系列的问题。

<image src="{{url}}" style="height: 300rpx;width: 300rpx" bindtap="goPreview"></image>
goPreview() {
  wx.previewImage({
    current: this.data.url, 
    urls: [this.data.url]
  })
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
  console.log('触发了onShow函数');
},

/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
  console.log('触发了onHide函数');
}

通过操作可以发现,点击图片预览时会触发onShow函数,再次点击图片取消预览时会触发onHide函数。
在onShow函数里写了调用了后端的接口,界面就会刷新
解决方法如下:

一、设置变量isPreview

在data中设置变量isPreview,默认值为false会触发onShow函数,当值为true时不触发onShow函数。

二、点击图片预览时设置isPreview的值

触发goPreview方法时设置isPreview的值为true

goPreview() {
  this.setData({isPreview: true})
  wx.previewImage({
    current: this.data.url, 
    urls: [this.data.url]
  })
}
三、在onShow函数中添加判断

点击图片,isPreview为true,则不触发onShow函数,重新把isPreview的值设置为false;

onShow: function () {
  if(this.data.isPreview) {
    this.setData({isPreview:false})
  } else {
    // doFunction() 调用接口
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值