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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
关于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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
解决vue热替换失效的根本原因
2018/09/19 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
总结Python编程中函数的使用要点
2016/03/20 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python 拼接文件路径的方法
2018/10/23 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python requests指定出口ip的例子
2019/07/25 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
初中语文教学反思
2014/02/02 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
基层党支部整改方案
2014/10/25 职场文书
前台接待岗位职责
2015/02/03 职场文书
法律进社区活动总结
2015/05/07 职场文书
政协常委会议主持词
2015/07/03 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript