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. 简单实现一个快速传输电子书到kindle的小项目

    前言 最近翻出来好久没有看的kindle,准备继续我的阅读之路.当然,也是因为发现了一个非常好的获取电子书资源的网站,又燃起了我的阅读兴趣. 然而,往kindle里传输电子书的方式一共有四种: 直接在 ...

  2. PAM学习小结

    PAM 目录 PAM 功能: 回文树 Fail指针 Trans指针 构建PAM 应用 P5496[模板]回文自动机(PAM) P4287[SHOI2011]双倍回文 P4555[国家集训队]最长双回文 ...

  3. Windows 下 MySQL 简单定时自动备份、删除过期备份

    Windows 下 MySQL 简单定时自动备份.删除过期备份 MySQL Workbench 客户端虽然好用,但并不提供自动备份功能.手工备份,确实繁琐. 新建一个 数据库备份文件存放目录,本例为D ...

  4. 在命令行运行 python 抛出 ModuleNotFoundError 的解决方法

    所要运行的 py 文件在子目录中,并且该文件引用了另一个子目录中的 py 模块.类似这样: 原因 在运行环境下, a.py 找不到 b.py 所以抛出 ModuleNotFoundError. 解决 ...

  5. Spring MVC 04-- 接收前端参数json格式的方式

    /** * 第一种:以RequestParam接收 * 前端传来的是json数据不多时:{"id":1},可以直接用@RequestParam来获取值 * * @param id ...

  6. docker基础命令,常用操作

    docker基础命令 使用docker镜像 获取镜像 从docker registry获取镜像的命令是docker pull.命令格式是: docker pull [选项][docker regist ...

  7. Django orm Q查询补充

    Q的简单用法 from django.db.models import Q q = Q() q.children.append(("username", "lyj&quo ...

  8. 后门及持久化访问4----Com组件劫持

    代码及原理介绍 COM是Component Object Model(组件对象模型)的缩写,COM组件由DLL和EXE形式发布的可执行代码所组成.每个COM组件都有一个CLSID,这个CLSID是注册 ...

  9. 通过PROFINET网络实现SINAMICS 120的PN IO OPC通讯,起动及调速控制 | OPC通讯

    1 概述 TCP/IP 通讯的传输时间可能太长,并且该时间具有不确定性,无法满足生产自动化领域的要求.因此,在进行时间要求苛刻的IO 有效载荷数据通讯时,PROFINET IO 不使用TCP/IP,而 ...

  10. 计算机网络:套接字(Socket)| Python socket实现服务器端与客户端通信,使用TCP socket阿里云ECS服务器与本机通信

    所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲,套接字上联应 ...