网页移动端,查看大图功能.使用手机默认的返回方式(比如左划返回),回跳上一个路由的问题

最新推荐文章于 2021-05-21 13:56:06 发布
最新推荐文章于 2021-05-21 13:56:06 发布
阅读量257 收藏 1
点赞数
分类专栏： 移动端踩坑 popstate 大图显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50061893/article/details/116941154
版权

1.由于大图是一个组件,没有单独给路由,所以调用手机的返回上一层实际上改变的是路由,就会回到上一个路由. 功能无法完成. 下面上gif展示图

在这里插入图片描述
启用右划返回,直接返回到了首页.用户体验极差.

2.解决方案是给路由添加一个默认的空记录,下面直接上代码和完成的样子图

在这里插入图片描述
在这里插入图片描述

3.完美解决. 踩坑结束

冲动消费
关注
专栏目录
html5 手机左滑画面关闭,app、h5上实现左滑、右滑返回上一页
weixin_39953244的博客
06-16 2885
下面的代码是我自用的，等后面空了再做成组件。先以代码的形式分享。由于ios本身就自带了功能，所以ios的左右滑功能我给过滤掉了(需要的话可以自己修改代码)。第一步：将代码保存为组件下面是代码，可以定义为 pageFooter.vue，以我自己的为例，我将文件放到了@/components/common/pageFooter.vue中下面是代码：export default {props: {lef...
html点击左划事件,原生js实现移动端点击、长按、左滑、右滑、上滑、下滑等事件模拟...
weixin_39593354的博客
06-10 923
github地址：https://github.com/xubaodian/...为什么要模拟这些事件？1、上述这些事件中，浏览器直接支持的事件只有点击，而其它事件使用频率也很高。2、移动端web原生点击事件会有300ms的延迟，因为用户肯能双击，为了判断用户是单击还是双击，所以会有这个延迟，这个延迟会衍生很多问题，例如点击穿透。所以我们可以不用原生的点击事件，而使用模拟点击事件。如何模拟这些事件...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
10-23
最近接了个项目，项目需求是这样的，当点击图片查看图片，再次点击大图被隐藏，在移动端用的比较多，因为移动端屏幕小，需要查看大图。具体代码实现过程本文给大家介绍，需要的朋友可以参考下
移动端点击图片查看大图
weixin_33727510的博客
11-04 332
一、需求 点击图片查看大图，再点大图隐藏。多用于移动端，因为移动端屏幕小，可能需要查看大图。 二、代码 <!DOCTYPE html> <html> <meta charset="utf-8"/> <head runat="server"> <title>JQuery点击图片查看大图by starof&l
html5手机端查看图片
12-23
HTML5,手机端查看图片，可全屏，放大，下载，等等操作
支持手机移动点击小图大图查看浏览
01-22
支持手机移动点击小图大图查看浏览，用jquery写的，实现了点击小图可以查看大图浏览，可以使用与移动端
Android左滑返回功能的实现示例代码
08-30
本篇文章将为您介绍Android左滑返回功能的实现示例代码，主要涉及到滑动返回的实现原理、滑动事件处理、OverScroller的使用等方面。 一、滑动返回的实现原理 滑动返回的实现原理可以分为两步：首先，将Activity的...
微信小程序去除左上角返回键的实现方法
10-15
因此，如果使用`redirectTo`，左上角的返回键将不会显示，因为无法回退到前一个页面。 3. `wx.switchTab`：用于跳转到 tabBar 页面，这个操作会关闭所有非 tabBar 页面，只保留 tabBar 页面。所以，如果使用`...
Vue App右滑屏幕返回上一页
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
09-18 3067
1、安装vue-directive-touch组件 npm install vue-directive-touch --save 2、引入组件 在main.js中引入vue-directive-touch import touch from 'vue-directive-touch'; Vue.use(touch); 3、在需要的页面使用 <template> &...
图片循环滚动完美解决
weixin_30662539的博客
03-27 111
Word-BREAK: break-all" cellSpacing=0 cellPadding=0 width="100%" align=center border=0> Word-BR...
beforeRouteLeave 两次进入问题，解决IOS 滑动默认返回上级路由问题
旧忆时光的博客
05-21 1657
场景是，表单填写页面 默认返回首页，有特定按钮返回首页，但是移动端IOS 支持滑动返回上级路由，这样表单成功页面会回到填写表单填写的最后一个步骤页面，如果使用replace，那表单填写步骤之间的页面就不能返回了，所以针对次场景，对填写成功页面做路由守卫监听，控制路由全部指向首页 beforeRouteLeave(to, from, next) { if (to.path === '/home') { // 判断要去的页面 如果是要去的目的页面就继续，（第二次进入该路由守卫） .
移动端 点击图片放大
Amy_cloud的博客
12-26 1万+
实现原理： 通过判断在线预览 img的宽度来改变图片的大小，jQ里面 width()可以获取到 元素的宽度。 1.HTM部分：<p> <span>上传附件：</span> <input type="file" accept="image/*" capture="camera" class='file' id='uploadImg' value=''>
手机端点击图片全屏预览
Kathy_Hui的博客
09-06 7459
&lt;!doctype html&gt;    &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;         &lt;title&
H5 安卓返回键路由问题
西鱼的博客
09-06 1034
Vue H5安卓的返回键解决方案 使用Vue和H5做安卓手机端时候，安卓的实体返回键会返回上一个路由页面，导致页面出现各种问题。 一、路由跳转页面改写 在组件中，有需要跳转页面，并且不让用户返回的情况，例如：支付、登录、注销等。请做一下修改： 1、this.$router.push()全部改写为this.$router.replace() 2、<router-link to="/">全...
vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
热门推荐
u012219674的博客
11-28 3万+
最近在做一个小型的vue移动端项目（自己练手），在处理到添加”返回键“的时候遇到的问题，在这里记录一下： 问题：如何通过路由地址的改变控制返回键的显示与隐藏
weex生成的单页应用嵌入app中，点击物理返回键时如何返回上一个路由页面，而不是直接退出单页应用，回到原生app页面...
weixin_34187822的博客
04-25 577
weex单页应用，嵌入到app中后，点击物理返回键的时候，会直接退出weex应用，而不是返回上一个weex页面。将这段代码放在项目的入口js文件中，使用weex内置组件globalEventvar globalEvent = weex.requireModule('globalEvent'); globalEvent.addEventListener('androidback', function...
javascript实现查看html网页放大图片功能
sherry_qin的博客
03-14 6451
本程序实现了放大查看网页中的图片的功能，效果如下： 作用：可用于模仿淘宝，查看物品细节的功能，也可用于嵌入网页的视频的放大查看。测试方法：直接拷贝本程序到新建的html文件，建好后，在同一文件夹下，新建文件夹命名为“image”，再放入一张图片，然后修改代码中两处图片名，即可使用。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
微信小程序用户左划禁止返回上一页
最新发布
07-27
在微信小程序中，可以通过监听用户的手势事件来实现禁止左划返回上一页的功能。可以在页面的onLoad函数中添加以下代码： ```javascript Page({ onLoad: function () { wx.hideHomeButton(); // 隐藏返回首页按钮...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值