vue 手机物理监听键+退出提示代码
我就废话不多说了，大家还是直接看代码吧~
<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 手机物理监听键+退出提示代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue监听浏览器原生返回按钮,进行路由转跳操作
今天测试给我报了个bug说点击浏览器返回页数据显示的不对,我查了半天原因:需要监听浏览器的回退按钮,并阻止其默认事件. 具体操作方法如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.canc
-
vue任意关系组件通信与跨组件监听状态vue-communication
众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! vue-communication介绍 他是一个可观测可调试的vue组件通信方案 任意关系组件可直接通信 支持跨组件监听数据变化 支持发送离线数据 安装 yarn add vue-communication // 或者 n
-
解决removeEventListener 无法清除监听的问题
1. 原因 许多入前端不久的人都会遇到 removeEventListener 无法清除监听的情况,这是由于 要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction). 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的. 而在很多情况下我们需要句柄回调的传参,又需要其他传参时免不了使用句柄
-
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf
-
vue中是怎样监听数组变化的
我们知道通过Object.defineProperty()劫持数组为其设置getter和setter后,调用的数组的push.splice.pop等方法改变数组元素时并不会触发数组的setter,这就会造成使用上述方法改变数组后,页面上并不能及时体现这些变化,也就是数组数据变化不是响应式的(对上述不了解的可以参考这篇文章).但实际用vue开发时,对于响应式数组,使用push.splice.pop等方法改变数组时,页面会及时体现这种变化,那么vue中是如何实现的呢? 通过vue源码可以看出,vue
-
vue深度监听(监听对象和数组的改变)与立即执行监听实例
1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
-
vue 手机物理监听键+退出提示代码
我就废话不多说了,大家还是直接看代码吧~ <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;opaci
-
vue项目中监听手机物理返回键的实现
背景:项目中有一个场景要监听android手机物理返回键,但是app和js的中间件又没提供这个事件的监听,只能百度纯js实现了 第一步: xback.js ;!function(pkg, undefined){ var STATE = 'x-back'; var element; var onPopState = function(event){ event.state === STATE && fire(); } var record = function(state){ history
-
vue生成随机验证码的示例代码
本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"
-
jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演
-
Android编程之自定义AlertDialog(退出提示框)用法实例
本文实例讲述了Android编程自定义AlertDialog(退出提示框)用法,分享给大家供大家参考,具体如下: 有时候我们需要在游戏或应用中用一些符合我们样式的提示框(AlertDialog) 以下是我在开发一个小游戏中总结出来的.希望对大家有用. 先上效果图: 下面是用到的背景图或按钮的图片 经过查找资料和参考了一下例子后才知道,要实现这种效果很简单.就是在设置alertDialog的contentView. 以下的代码是写在Activity下的,代码如下: public boolean o
-
在Vue 中使用Typescript的示例代码
Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescrip
-
在vue中使用vue-echarts-v3的实例代码
特征 •轻量,高效,按需绑定事件 •支持按需导入ECharts.js图表和组件 •支持组件调整大小事件自动更新视图 一.安装 npm install --save echarts vue-echarts-v3 二.用法 用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件 1.webpack 1.x 修改成如下 { test: /\.js$/, loader: 'babel', include: [ path.join(prjRoot,
-
Vue 莹石摄像头直播视频实例代码
Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q
-
vue 下列表侧滑操作实例代码详解
由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧.有点多 效果如图 <template> <div class="lottery-management-wrapper"> <ul> <li class="lottery-management-list-wrapper"> <div class="lottery-management-list" v-for="(item ,
-
实例详解Vue项目使用eslint + prettier规范代码风格
团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力