vue里监听安卓的物理返回键
Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由。
实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由,所以需要对安卓进行兼容
开始的方案是Android原生重写方法onKeyDown(),H5 JsBridge js去调用方法,当需要的时候屏蔽物理返回键,这种方法也能实现
由于H5单页用的是vue,vue中的路由方法也能实现,并且不需要和APP交互,更加便捷,所以最终决定采用这种方法
只需要写在路由页面中
beforeRouteLeave (to, from , next) { // 离开当前路由进行的操作
// 如果页面上没有展示弹层,弹层全部关闭的话,按回退按钮会执行返回,即到下一个路由
// this.$vux.confirm.isVisible()用来判断是否显示vux的confirm弹层
if (!this.showPop&&!this.$vux.confirm.isVisible()) { // 所有弹层都是关闭状态才执行回退路由
next()
} else {
this.$vux.confirm.hide() // 关闭confirm弹层
this.showPop = false
next(false) // 否则就不到下个路由,而是把各个弹层关闭掉
}
},
vue里监听安卓的物理返回键的更多相关文章
- 使用cordova,监听安卓机物理返回按键,实现退出程序的功能
在使用html5开发app时,并不能像Android原生那样调取手机自身的方法.而cordova正好弥补了html5这一缺陷. 一,在cordova中文网http://cordova.axuer.co ...
- Cocos Creator 监听安卓屏幕下方返回键
addEscEvent = function(node){ cc.eventManager.addListener({ event: cc.EventListener.KEYBOARD, onKeyP ...
- 在 React 组件中监听 android 手机物理返回/回退/back键事件
当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...
- vue+hbuilder监听安卓返回键问题
1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...
- 从网页监听Android设备的返回键
最近搞Android项目的时候,遇到一个比较蛋疼的需求,需要从Client App调用系统浏览器打开一个页面,进行杂七杂八的一些交互之后,返回到App.如何打开浏览器和如何返回App这里就不说了,有兴 ...
- HTML5 监听移动端浏览器返回键兼容版本
// 往windosw对象中的历史记录注入URL的方法 function addUrl() { var state = { title: "title", url: "# ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventList ...
- vue监听移动设备的返回事件
在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...
随机推荐
- struts2开发流程及配置,域对象对数据存储的3种方式
一.开发流程 1)引入 jar 包,其中必须引入的有(我是用的struts是2.3.32) commons-fileupload-1.3.2.jar |文件上传下载commons-io-2.2 ...
- Object-C中的字符串对象1-不可变字符串
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
- Linux下使用DD命令测试磁盘读写速度
dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换,所以可以用来测试硬盘的读写能力~ 几种常见的DD命令,先看一下区别~ dd bs=6 ...
- C++不让程序一闪而过
末尾加上System("pause") 不过需要注意,这个只在win32下有效.不具备可移植性.
- Atitit.mysql oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server..
Atitit.mysql oracle with as模式临时表模式 CTE 语句的使用,减少子查询的结构性 mssql sql server.. 1. with ... as (...) 在mys ...
- RCC—使用 HSE/HSI 配置时钟 ---时钟树
本章参考资料:< STM32F4xx 中文参考手册> RCC 章节.学习本章时,配合< STM32F4xx 中文参考手册> RCC 章节一起阅读,效果会更佳,特别是涉及到寄存器 ...
- 插入节点insertBefore()
http://www.imooc.com/code/1699 插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBef ...
- Eclipse “cannot be resolved to a type” error
引言: eclipse新导入的项目经常可以看到"XX cannot be resolved to a type"的报错信息.本文将做以简单总结. 正文: (1)jd ...
- [Kernel]理解System call系统调用
转自:http://os.51cto.com/art/200512/13510.htm 现在,您或许正在查看设备驱动程序,并感到奇怪:“函数 foo_read() 是如何被调用的?”或者可能疑惑: “ ...
- zombie处理
僵尸进程处理 程序处理(预处理) 父进程wait/waitpid. signal(SIGCHLD, SIG_IGN); 捕捉SIGCHLD,signal(SIGCHLD, handler);可获取子进 ...