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


Posted in Javascript onSeptember 09, 2020

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

<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的“导航守卫”,在离开时进行处理一下即可。话不多说,直接上例子:

beforeRouteLeave (to, from, next) {
   if(this.success){
    next({path:'/home'});//重定向到指定路径
   }else{
    next()
   }
 }

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

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

Javascript 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
jquery中this的使用说明
Sep 06 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
树结构之JavaScript
Jan 24 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
关于angular引入ng-zorro的问题浅析
Sep 09 #Javascript
关于vue的列表图片选中打钩操作
Sep 09 #Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 #Javascript
js实现简单抽奖功能
Nov 24 #Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
You might like
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
会计工作决心书
2014/03/11 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
工程催款通知书
2015/04/17 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python