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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
javascript document.images实例
May 27 Javascript
javascript Excel操作知识点
Apr 24 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
js获取域名的方法
Jan 27 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php遍历数组的方法分享
2012/03/22 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
AngularJS服务service用法总结
2016/12/13 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Django安装配置mysql的方法步骤
2018/10/15 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python异常处理例题整理
2019/07/07 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
诚信贷款承诺书
2014/05/30 职场文书
小浪底导游词
2015/02/12 职场文书
务工证明怎么写
2015/06/18 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python