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 相关文章推荐
基础的prototype.js常用函数及其用法
Mar 10 Javascript
select组合框option的捕捉实例代码
Sep 30 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
浅析return false的正确使用
Nov 04 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
微信小程序代码上传、审核发布小程序
May 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
基于pear auth实现登录验证
2010/02/26 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
详解Python中find()方法的使用
2015/05/18 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python实现银行管理系统
2019/10/25 Python
python怎么提高计算速度
2020/06/11 Python
自荐信的五个重要部分
2013/10/29 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
活动总结书怎么写
2015/05/11 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL