Vue-app:物理返回键设置(单击跳转/双击退出)

1.概述

实现手机物理返回键的跳转逻辑:除特殊页面(例如首页、我的等一级页面),单击跳转到前一页;一级页面(除首页)单击跳转到首页;首页单击提示“在单击一次,退出app”,单击两次退出app。

2.代码步骤

1.在main.js中

import Mui from ‘vue-awesome-mui‘;

       Vue.use(Mui);

2.在index.html中

  <script>

       mui.init({

           keyEventBind: {

                backbutton: true //关闭back按键监听

           }

       });

        // //首页返回键处理

        // //处理逻辑:1秒内,连续两次按返回键,则退出应用;

       var first = null;

       mui.back = function() {

       //首次按键,提示 再按一次退出应用

       if (!first) {

            first = new Date().getTime(); //记录第一次按下回退键的时间

            mui.toast("再按一次退出应用"); //给出提示

            history.go(-1); //回退到上一页面

           setTimeout(function() {

              //1s中后清除

            first = null;

             }, 1000);

           else {

             if (new Date().getTime() - first < 1000) {

             //如果两次按下的时间小于1s,

             plus.runtime.quit(); //那么就退出app

             }

           }

        };

</script>

原文地址:https://www.cnblogs.com/wjl-boke/p/10931298.html

时间: 2024-08-03 20:08:12

Vue-app:物理返回键设置(单击跳转/双击退出)的相关文章

js修改物理返回键功能

preventBack: function(theurl){ var pushState = window.history.pushState; //点击物理返回键时,退出到跳转定义首页 if(pushState){ window.history.pushState({a: Math.random()},'', location.href); window.addEventListener('popstate', function(){ var type = typeof(theurl); ty

js history对象 手机物理返回键

有兴趣的可以了解下history对象,不感兴趣也可以直接跳到手机物理返回键监听部分 ******************[history对象]有length属性,go()/back()/forward()跳转方法**************************** 我们要了解浏览器的history对象, history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起:history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,histo

React Native组件之BackAndroid !安卓手机的物理返回键的使用

ok!在安卓手机上,当我们用物理返回键的时候,会以一次性的将程序退出来,这样是很不好的体验,所以就需要使用RN的物理返回键组件:BackAndroid,其原理也就是 分析路由,然后pop()这样! ok!先来说下路由栈吧!,有一点计算机技术基础的同学都应该学过堆栈,其中的栈就是后入先出,也就是RN里面的push(入栈),pop(出栈)! 好的!如图所示! 1:两个路由之间的backandroid else return 直接退出应用 2:在注册组件设置backAndroid(这里注意了,在注册组

大叔也说Xamarin~Android篇~监听返回键,单击返回某个webView,双击退出

原文:大叔也说Xamarin~Android篇~监听返回键,单击返回某个webView,双击退出 这个操作在原生android里是很容易实现的,在xamarin里也不难,在activity里有方法OnKeyDown,我们只需要重写一下就可以了,然后通过webView重新加载到要返回的页面即可,当然操作有些死板,但还是有着不错的效果! 实现的原理就是在activity里设置一个时间,单击后把这个时间赋值并与当前时间进行比较,如果在2秒内,就认为是双击操作,当然这个时间间隔你可以自己设置,在认为是双

H5监听Android物理返回键

问题:H5页面的返回键可以回退到指定页面,但是Android手机的物理返回键会回到上一页. 解决办法:以下代码可以实现,Android返回键时调用H5的方法(下面代码中用的是H5的GoBackUrl方法),实现跳转到指定页面. //拦截安卓回退按钮,调用H5的返回方法 history.pushState(null, null, location.href); window.addEventListener('popstate', function (event) { history.pushSt

quick-cocos2d-x android返回键监听并实现原生退出对话框

这两天终于闲了一下,就顺手又把quick捡起来又学了学,一直都觉得quick比cocos2dx那套lua绑定要方便许多,今天试了下android返回键的监听,还是挺好弄的,所以就有了这篇. 首先说明一下使用的quick版本--2.2.5. 直接上代码 function MainScene:addBackEvent() if device.platform == "android" then self.touchLayer = display.newLayer() self.touchL

android 按两次物理返回键退出程序

<?xml version="1.0" encoding="utf-8"?> <!-- 定义当前布局的基本LinearLayout --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=

react native 之 Android物理返回键

基本用法 根据文档,安卓back键的处理主要就是一个事件监听: 1 BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed); 2 BackAndroid.removeEventListener('hardwareBackPress', this.onBackPressed); 在starter-kit里,我们在App这一级别,实现了按back键回退导航栈的功能: 1 class App extends React

监听微信物理返回键,并返回指定页面

我们要了解浏览器的history.大家知道在页面中我们可以使用JavaScript window history,后退到前面页面,但是由于安全原因javascript不允许修改 history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url.既然有提供popstate事件 监测,那么我们就可以进行监听. 返回.后退.上一页按钮点击监听实现代码: window.addEventListener("p