wx.previewImage预览图片这个过程到底发生了什么?

首先我们点击图片预览,附上查看图片代码:

<image class="headImg" data-src="{{myData.firstPageBgm}}" bindtap="lookImg" mode="aspectFill" src="{{myData.firstPageBgm}}"></image>
// 图片预览
lookImg(e) {
const url = e.target.dataset.src;
const box = new Array();
box.push(url);
wx.previewImage({
current: url,
urls: box
})
},

打印结果是,在点击图片预览时触发了onHide函数:

再次点击图片, 返回到页面-----发生:

会触发onShow函数,而我在onShow函数里写了调用接口返回后端数据,加载页面数据等等,怪不得会重新加载页面。

解决办法如下:

一、设置变量  isPreview 为true不触发onshow里面的函数

  

二、在onShow函数添加判断

点击图片,isPreview为true,则不触发onShow里的接口调用等等代码;

三、在预览图片函数里添加isPreview = true

搞定了,  诸位 如果有更好方法 或者 疑点请告知在下;

参考链接:https://blog.csdn.net/weixin_42512816/article/details/110161995

小程序wx.previewImage查看图片再次点击返回时重新加载页面问题的更多相关文章

  1. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  2. 微信小程序wx.previewImage实用案例(交流QQ群:604788754)

    本案例是可以滑动预览多张图片效果.(本案例在本地配置好之后,请扫描二维码到手机滑动预览.在开发者工具上预览,滑动不是很流畅) 图片必须选择远程图片,本地图片无法实现预览. 或是通过wx.chooseI ...

  3. 微信小程序开发之多图片上传+服务端接收

    前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  6. 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址

    简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...

  7. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  8. ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案

    微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...

  9. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

随机推荐

  1. 基于FastAPI和Docker的机器学习模型部署快速上手

    针对前文所述 机器学习模型部署摘要 中docker+fastapi部署机器学习的一个完整示例 outline fastapi简单示例 基于文件内容检测的机器学习&fastapi 在docker ...

  2. SQL从零到迅速精通【实用函数(3)】

    1.LOWER()函数 使用LOWER函数将字符串中所有字幕字符转换为小写,输入语句如下. SELECT LOWER('BEAUTIFUL'),LOWER('Well'); 2.UPPER()函数 S ...

  3. 小程序授权登录并 laravel7(laravel8) token 应用

    参考博客: https://blog.csdn.net/qq_42839386/article/details/118279530 1:composer 下载 composer require fir ...

  4. WPF中的事件及冒泡事件和隧道事件的区别

    WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...

  5. WebGPU 计算管线、计算着色器(通用计算)入门案例:2D 物理模拟

    目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Paral ...

  6. python溴事百科爬虫

    import urllib.request import re # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 def jokeCr ...

  7. 域渗透 | kerberos认证及过程中产生的攻击

    ​文章首发于公众号<Z2O安全攻防>​ 直接公众号文章复制过来的,排版可能有点乱, 可以去公众号看. https://mp.weixin.qq.com/s/WMGkQoMnQdyG8UmS ...

  8. Ubuntu一键安装LAMP,LNMP

    参考: https://blog.csdn.net/xueyingqi/article/details/50674078 https://www.cnblogs.com/pengzheng/p/363 ...

  9. 深度学习训练过程中的学习率衰减策略及pytorch实现

    学习率是深度学习中的一个重要超参数,选择合适的学习率能够帮助模型更好地收敛. 本文主要介绍深度学习训练过程中的6种学习率衰减策略以及相应的Pytorch实现. 1. StepLR 按固定的训练epoc ...

  10. @Param注解和@Mapper注解

    @Param 1.如果dao方法中只有一个参数,入参可以为#{0}或者#{任意单词},也可以使用@Param指定参数名称,sql中就只能#{指定名称}获取参数 public List<Regio ...