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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
百度小程序之间的页面通信过程详解
Jul 18 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
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
python实现报表自动化详解
2017/11/16 Python
zookeeper python接口实例详解
2018/01/18 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Django框架视图介绍与使用详解
2019/07/18 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
python字符串的拼接方法总结
2019/11/18 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
目标责任书格式
2014/07/28 职场文书
金融专业求职信
2014/08/05 职场文书
教师个人培训总结
2015/02/11 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python PIL按比例裁剪图片
2022/05/11 Python