F7+vue 物理返回键监听使用

蔚落 2022-06-05 11:57 386阅读 0赞

[F7+vue 物理返回键监听使用][F7_vue]

以前使用的是纯F7,这个项目加了Vue进去，但碰到了一个问题，就是这样监听不到安卓物理键的返回，它是点击返回，直接推出程序，这个坑有点深，查了不少资料也问了不少人，最后在网上看到了别人的写的，自己也改了一点，最后可以返回，但是不能直接退出，坑还是没有爬完：上代码：

![复制代码][copycode.gif]

var XBack = {};
        (function(XBack) {
            XBack.STATE = 'x - back';
            XBack.element;
    
            XBack.onPopState = function(event) {
                event.state === XBack.STATE && XBack.fire();
                XBack.record(XBack.STATE); //初始化事件时，push一下  
                 
            };
    
            XBack.record = function(state) {
                history.pushState(state, null, location.href);
    
            };
    
            XBack.fire = function() {
                var event = document.createEvent('Events');
                event.initEvent(XBack.STATE, false, false);
                XBack.element.dispatchEvent(event);
                  
            };
    
            XBack.listen = function(listener) {
                XBack.element.addEventListener(XBack.STATE, listener, false);
            };
    
            XBack.init = function() {
                XBack.element = document.createElement('span');
                window.addEventListener('popstate', XBack.onPopState);
                XBack.record(XBack.STATE);
                
            };
    
        })(XBack); // 引入这段js文件  
        XBack.init();
     　　mounted() {
    　　　　　　var $_this = this;
                XBack.listen(function() {
                    $_this.$router.back()
                });  
    　　}，
    
    这段代码放在入口页就可以了

[F7_vue]: http://www.cnblogs.com/MyIsLu/p/7607728.html
[copycode.gif]: /images/20220605/d885aa29455d48379a3ba2d6388a955d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue开发app 手机物理返回键返回/退出

mui进行手机物理键的监听首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import Mui f

小咪咪/ 2023年07月18日 02:30/ 0 赞/ 129 阅读

相关 VUE监听手机物理返回按键

生命周期创建页面添加监听 mounted() { if (window.history && window.history.p

本是古典何须时尚/ 2023年03月12日 07:19/ 0 赞/ 34 阅读

相关 Vue 中 app 监听安卓物理返回

// 监听安卓返回键在main.js中 //监听安卓返回键 (function() \{ function plusReady() \{

àì夳堔傛蜴生んèń/ 2023年02月26日 10:21/ 0 赞/ 125 阅读

相关 vue 返回键监听返

遇到个需求，下完单跳转成功页面，此时返回需要回首页，页面有返回按钮但怕用户此时点返回键就监听不到了。用了destroy方法中使用$router.push 发现不管用

逃离我推掉我的手/ 2023年01月06日 01:57/ 0 赞/ 285 阅读

相关物理返回键事件处理

物理返回键 1）app内：在app1上，H5和app约定好在window对象上定义一个全局的方法，比如window.back方法，H5会在路由定义位置，定义该方法。当触

曾经终败给现在/ 2022年12月21日 04:54/ 0 赞/ 306 阅读

相关 Android Fragment 监听物理返回 back 键

在很多场景下，我们需要 Fragment 监听物理 back 键，而不是 Activity，这个时候我们只能做一些处理，来让 Fragment 拦截。首先在 Fragmen

Bertha 。/ 2022年12月08日 14:08/ 0 赞/ 607 阅读

相关 F7+vue 物理返回键监听使用

[F7+vue 物理返回键监听使用][F7_vue] 以前使用的是纯F7,这个项目加了Vue进去，但碰到了一个问题，就是这样监听不到安卓物理键的返回，它是点击返回，直接推出程

蔚落/ 2022年06月05日 11:57/ 0 赞/ 387 阅读

相关监听Home键和返回键

创建homereceiver import android.content.BroadcastReceiver; import android.con

淩亂°似流年/ 2022年05月31日 07:53/ 0 赞/ 438 阅读

相关 vue 移动端物理返回键

柚子写过一个Vue的移动端项目，当时遇到一个问题，就是按手机上的自带的物理返回按钮时，会直接退出应用程序，后来百度了一些关于手机物理返回键的文章，也终于是解决了，

雨点打透心脏的1/2处/ 2022年01月15日 00:39/ 0 赞/ 555 阅读

相关 react native监听物理返回键和沉浸式状态栏

监听物理返回键：首先定义全局参数： var lastBackPressed; var current = true;

绝地灬酷狼/ 2021年09月17日 03:14/ 0 赞/ 746 阅读