vue开发的h5项目内嵌原生，手势返回问题

最新推荐文章于 2023-11-24 12:17:50 发布
最新推荐文章于 2023-11-24 12:17:50 发布
阅读量1.4k 收藏
点赞数 1
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumelege/article/details/127495360
版权

记录一下问题
描述：vue开发的h5项目内嵌原生，在部分安卓机型上出现了 手势返回和物理键返回出现了 一次返回多个路由的场景，例如从A -> B -> C，在C页面手势返回直接回到A页面；但是B页面事件也触发了，相当于连续触发了两次路由回退事件，原生无法排查出问题的情况下，前端自己处理

处理方案：可以在全局路由守卫beforeEach中进行拦截，具体方案为 将进入当前路由的时间存储下来，下个路由进入时间与当前进入时间差小于某个值将阻止跳转

在这里插入图片描述
setLastTimeParse就是设置lastTimeParse的值为当前时间戳，800毫秒对用户没啥影响，不建议设置过大

只是风景丨
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Android加载H5页面手机的返回操作
nyb521的博客
03-12 3448
最近接了一个新项目，项目说是混合开发，其实就是原生给个壳，实现全是前端的同学做的，接到项目后，领导说了很多bug，其中这个比较有趣，所以在这个记录一下，还原一下： 当我们登录成功后进入首页，然后再首页深入点击进入多级页面，点击手机的返回按钮，可以实现返回到上个页面，但是当返回到首页后，正常来说点击返回按钮应该走我写好的退出页面的方法，但是它并没有走退出的方法，而是走了，还有页面返回的方法，导致每...
h5+实现手机端的录音，拍照，录像App
02-26
该demo使用h5+的功能基于android手机实现了录音，拍照，录像并进行上传下载，播放的功能，采用h5开发移动app，理论是支持android和ios的开发，开发工具采用hbuilder，利用hbuilder打包app在android机上运行，目前只...
vue h5 项目中与 app 安卓 or ios 进行交互 方式， h5与app交互
happlyli的博客
03-02 1566
vue h5 项目中与 app 安卓 or ios 进行交互 方式， h5与app交互
vue3 h5开发， vue3移动端手势库
业余前端的职业经历
06-15 1643
包括之前的那种的点击穿透的问题， 对常人来说click事件300ms的延迟可能没啥子问题，但是前端优化方面 考虑做h5的童鞋还是要考虑下。
监听浏览器返回，可清除历史记录（移动端：手势返回）（vue）
weixin_61285710的博客
01-10 2218
监听浏览器返回，可清除历史记录，对返回事件做处理（移动端：手势返回）（vue）
vue 之 h5操作原生app 实现导航栏的隐藏 返回原生app
weixin_47409897的博客
11-30 1303
转载于：链接: link. 方式2：直接在 public 中的 index.html文件之中 引入ios 安卓的.js 然后这边添加事件 kkk_android.js kkk_ios.js 注意点：需要在body前面加载， <script src="./js/kkk_android.js"></script> <script src="./js/kkk_ios.js"></script> <script type="text/jav..
Vue H5安卓的返回键解决方案
wangchaoqi1985的博客
07-23 669
Vue H5安卓的返回键解决方案
uniapp日历打卡，开箱即用可内嵌到项目中
最新发布
02-23
uniAPP是DCloud（数字天堂）推出的一站式多端开发框架，它基于Vue.js，并且提供了丰富的原生API，可以构建原生的iOS、Android应用，同时支持微信小程序、支付宝小程序等。通过uniAPP，开发者可以编写一次代码，运行...
详解如何探测小程序返回到webview页面
10-17
在开发微信小程序的过程中，有时我们需要将用户从小程序页面引导到内嵌的Webview页面，并确保当用户返回Webview时，页面能及时更新显示最新的数据。本文将深入探讨如何实现这一功能，通过实例代码和详细步骤解析如何...
APP常见的电商项目页面模版
01-07
3. **App开发**：模板同样适用于原生App开发，可能是通过H5内嵌或者使用uni-app等多端框架实现。uni-app是一个跨端框架，允许开发者使用一套代码运行在多个平台上，包括iOS、Android以及小程序等。 4. **核心文件...
H5小游戏源码 我盖了个比郭敬明还高的塔，你来试试吧！.zip
10-14
现代JavaScript库和框架如jQuery、React、Vue.js等，让开发变得更加高效，但本游戏可能使用原生JavaScript编写，以便更好地控制性能。 4. Canvas：在H5游戏中，`<canvas>`元素是一个重要的图形绘制接口，通过...
H5套壳APP,解决使用HbuilderX打包vue项目后，左滑退出app问题
fhdjdfhjd的博客
11-24 607
在 router 里面加导航守卫，随便缓存一个数，我这里是缓存了个“quit”为 0 或 1，当进入 home 页时缓存 quit 为 1，否则为 0。使用时在VUE项目根目录下的 public 目录下的 index.html 文件里加入 script。
（移动端）在APP中嵌入H5网页，返回上一步&返回APP菜单首页
qq_38969618的博客
02-03 9765
H5页面中：返回上一步固定写法（前端实现：使用vue框架的返回上一步语法即可）： <a href="javascript:;" class="myarrow" @click="backforward"></a> methods:{ backforward(){ this.$router.back(-1); // 返回上一步 ...
Vue移动端右滑屏幕返回上一页
WebDestiny的博客
10-08 2148
有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件，提高用户体验。 安装依赖 使用npm安装vue-directive-touch组件。 npm install vue-directive-touch --save 引入组件 在main.js中引入vue...
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
qq_66953312的博客
07-07 3693
Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)
（Vue2版本）Uniapp编写H5项目
努力的nana
11-10 4234
（Vue2版本）uniapp中编写H5项目
如何解决 5 Plus APP嵌套H5页面，回退页面层级问题？
Smile_ping的博客
10-10 430
5+App 安卓嵌套H5页面，操作多级页面后，点击返回键，无法返回上一级页面问题。
动手实现H5仿原生app前进后退切换效果
qq_34185872的博客
10-18 822
最近在优化H5页面，我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时，当触发页面路由切换会与原生app看上去有点格格不入，因为H5页面切换路由时是直接替换了原来页面的内容，在视觉效果上看到的是页面的跳转变化都是在同一个页面上，并没有一级二级页面这种视觉差，因此，参考了原生app中的页面切换效果，我打算将已经成熟的H5项目改造一下，优化视觉上的体验效果。在前端开发中通过实现一些动态效果，在用户使用体验上都能得到较大的改善，作为前端页面优化的一部分，有更多的动画效果值得我们花时间去研究。
vue h5项目模版
09-22
Vue H5项目模版是一种为开发移动端H5应用而设计的项目脚手架。它基于Vue.js框架，提供了一套基础的项目结构和常用的工具集，方便开发人员快速搭建和开发H5应用。 首先，Vue H5项目模版包含了一个基础的项目结构，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值