小程序wx.previewImage查看图片再次点击返回时重新加载页面问题
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查看图片再次点击返回时重新加载页面问题的更多相关文章
- 【微信小程序】微信小程序wx.previewImage预览图片
一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...
- 微信小程序wx.previewImage实用案例(交流QQ群:604788754)
本案例是可以滑动预览多张图片效果.(本案例在本地配置好之后,请扫描二维码到手机滑动预览.在开发者工具上预览,滑动不是很流畅) 图片必须选择远程图片,本地图片无法实现预览. 或是通过wx.chooseI ...
- 微信小程序开发之多图片上传+服务端接收
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序-显示外链图片 bug
微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- 微信小程序wx.request接口
微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...
- ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案
微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
随机推荐
- MATLAB菜鸟入门笔记【编程习惯】
1.编程标记模板 % Script file:temp_conversion.m % % Purepose: % To convert an input temperature from d ...
- CF1117G题解
题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...
- margin 塌陷bug 触发bfc
1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...
- python学习之matplotlib实战2
import numpy as np import matplotlib.pyplot as plt def main(): #scatter fig = plt.figure() ax = fig. ...
- 10 分钟讲完 QUIC 协议。
建议阅读本文需要搭配作者 HTTP 相关文章食用. 历史 HTTP 系列文章: 看完这篇HTTP,跟面试官扯皮就没问题了 HTTP 2.0 ,有点炸 ! 这里先来回顾一下 HTTP 的发展过程.首先, ...
- mysql学习笔记-底层原理详解
前言 我相信每一个程序员都避免不了和数据库打交道,其中Mysql以其轻量.开源成为当下最流行的关系型数据库.Mysql5.0以前以MyISAM作为默认存储引擎,在5.5版本以后,以InnoDB作为默认 ...
- SpringCloudAlibaba 微服务讲解(一)微服务介绍
微服务介绍 1.1 系统架构的演变 随若互联网的发展,网站应用的规模也在不断的扩大,逬而导致系统架构也在不断的进行变化.从互联 网早起到现在,系统架构大体经历了下面几个过程:单体应用架构一蟻直应用架构 ...
- KCP协议:从TCP到UDP家族QUIC/KCP/ENET
行文前先安利下<再深谈TCP/IP三步握手&四步挥手原理及衍生问题-长文解剖IP >.<再谈UDP协议-浅入理解深度记忆> KCP协议科普 KCP是一个快速可靠协议,能 ...
- 面试问题之C++语言:从源文件到可执行文件过程
1.预处理: 预处理过程主要处理那些源文件中的以"#"开始的预编译指令.包括:包含头文件.宏替换.条件编译而不进行语法检查. 2.编译: 编译过程就是把预处理的文件进行一系列的词法 ...
- 学习Git(二)
常用命令 git add 添加 git status 查看状态 git status -s 状态概览 git diff 对比 git diff --staged 对比暂存区 git commit 提交 ...