服务器之家

服务器之家 > 正文

vue 手机物理监听键+退出提示代码

时间:2021-09-22 17:18     来源/作者:在咕噜上敲打

我就废话不多说了,大家还是直接看代码吧~

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <script>
    //Toast 这些都是在网上粘的别人的。但是找不到出处了,大佬见谅。
    function Toast(msg,duration){
        duration=isNaN(duration)?3000:duration;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="width: 60%;min-width: 150px;opacity: 0.7;height: 30px;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 5px;position: fixed;bottom: 70px;left: 20%;z-index: 999999;background: rgb(0, 0, 0);font-size: 12px;";
        document.body.appendChild(m);
        setTimeout(function() {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() { document.body.removeChild(m) }, d * 1000);
        }, duration);
    }
    var time = '' // 用来存上一次按键时间;
    setTimeout(() => {
        // 监听返回按钮
        document.addEventListener('backbutton', function (evt) {
            console.log('监听按钮');
            var url = location.hash.split('/')[1];
            if (url === 'home' ) {// 处于app首页,满足退出app操作
                console.log('满足条件')
                if (new Date() - time < 2000) {// 小于2s,退出程序
                    navigator.app.exitApp();
                } else // 大于2s,重置时间戳,
                    time = new Date();
                    Toast('再次点击退出', 2000);
                }
                return;
            } else {
                console.log('不满足条件')
                history.back(); // 不满足退出操作,,返回上一页
            }
        }, false);
    }, 10)
</script>

代码很简单,逻辑也不是很复杂。但是要说一下为什么要用setTime( )。

我是在vue的index.html里面加的这些代码。在没有添加setTime()的时候不知道为啥他不执行,检查好几遍也没有错。最后请教的大佬,他也不知道为什么。/笑哭 不过能用了。

之前也遇到了一个关闭手机端虚拟键盘的操作。他就是不执行.。

document.activeElement.blur()

后来也是用settime( )解决的。

补充知识:Vue 单页面处理手机返回键问题

在用Vue开发单页面App时候,有时会遇到要处理返回按键的逻辑,让它不是返回默认的上一级页面,而是转到指定的页面。 百度了查了一下,网上给的方法基本都是通过监听“popstate”,并不能完美解决。后来想到了Router的“导航守卫”,在离开时进行处理一下即可。话不多说,直接上例子:

?
1
2
3
4
5
6
7
beforeRouteLeave (to, from, next) {
   if(this.success){
    next({path:'/home'});//重定向到指定路径
   }else{
    next()
   }
 }

就是在next()方法里面重定向就行。完美解决,还不用绑定监听再解绑监听。

以上这篇vue 手机物理监听键+退出提示代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_41592422/article/details/83903443

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部