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 相关文章推荐
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP实现微信发红包程序
2015/08/24 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Python中logging模块的用法实例
2014/09/29 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python检测生僻字的实现方法
2016/10/23 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python中bytes和str类型的区别
2019/10/21 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Django values()和value_list()的使用
2020/03/31 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
受欢迎的大学生自我评价
2013/12/05 职场文书
一份创业计划书范文
2014/02/08 职场文书
终止合同协议书
2014/04/17 职场文书
土木工程求职信
2014/05/29 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
病房管理制度范本
2015/08/06 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS