快捷導(dǎo)航

vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼

更新時(shí)間：2020年09月09日 09:26:15 作者：在咕嚕上敲打

這篇文章主要介紹了vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

	<script>
	//Toast 這些都是在網(wǎng)上粘的別人的。但是找不到出處了，大佬見(jiàn)諒。
	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 = '' // 用來(lái)存上一次按鍵時(shí)間；
	setTimeout(() => {
		// 監(jiān)聽(tīng)返回按鈕
		document.addEventListener('backbutton', function (evt) {
			console.log('監(jiān)聽(tīng)按鈕');
			var url = location.hash.split('/')[1];
			if (url === 'home' ) {// 處于app首頁(yè),滿足退出app操作
				console.log('滿足條件')
				if (new Date() - time < 2000) {// 小于2s,退出程序
					navigator.app.exitApp();
				} else {  // 大于2s，重置時(shí)間戳，
					time = new Date();
					Toast('再次點(diǎn)擊退出', 2000);
				}
				return;
			} else {
				console.log('不滿足條件')
				history.back(); // 不滿足退出操作，，返回上一頁(yè)
			}
		}, false);
	}, 10)
</script>

代碼很簡(jiǎn)單，邏輯也不是很復(fù)雜。但是要說(shuō)一下為什么要用setTime( )。

我是在vue的index.html里面加的這些代碼。在沒(méi)有添加setTime（）的時(shí)候不知道為啥他不執(zhí)行，檢查好幾遍也沒(méi)有錯(cuò)。最后請(qǐng)教的大佬，他也不知道為什么。/笑哭不過(guò)能用了。

之前也遇到了一個(gè)關(guān)閉手機(jī)端虛擬鍵盤(pán)的操作。他就是不執(zhí)行.。

document.activeElement.blur()

后來(lái)也是用settime( )解決的。

補(bǔ)充知識(shí)：Vue 單頁(yè)面處理手機(jī)返回鍵問(wèn)題

在用Vue開(kāi)發(fā)單頁(yè)面App時(shí)候，有時(shí)會(huì)遇到要處理返回按鍵的邏輯，讓它不是返回默認(rèn)的上一級(jí)頁(yè)面，而是轉(zhuǎn)到指定的頁(yè)面。百度了查了一下，網(wǎng)上給的方法基本都是通過(guò)監(jiān)聽(tīng)“popstate”，并不能完美解決。后來(lái)想到了Router的“導(dǎo)航守衛(wèi)”，在離開(kāi)時(shí)進(jìn)行處理一下即可。話不多說(shuō)，直接上例子：

beforeRouteLeave (to, from, next) {
   if(this.success){
    next({path:'/home'});//重定向到指定路徑
   }else{
    next()
   }
 }

就是在next()方法里面重定向就行。完美解決，還不用綁定監(jiān)聽(tīng)再解綁監(jiān)聽(tīng)。

以上這篇vue 手機(jī)物理監(jiān)聽(tīng)鍵+退出提示代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

利用Vue Router實(shí)現(xiàn)單頁(yè)面應(yīng)用(SPA)的代碼示例
在當(dāng)今前端開(kāi)發(fā)中,單頁(yè)面應(yīng)用（SPA）已成為一種主流的開(kāi)發(fā)模式,它通過(guò)在用戶與網(wǎng)頁(yè)之間提供更流暢的交互體驗(yàn),來(lái)改變傳統(tǒng)多頁(yè)面應(yīng)用的思維,本文將詳細(xì)介紹如何利用 Vue.js 中的 Vue Router 來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的單頁(yè)面應(yīng)用,需要的朋友可以參考下
2025-01-01
vue插槽slot的理解和使用方法
這篇文章主要給大家介紹了關(guān)于vue中插槽slot的理解和使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解
這篇文章主要介紹了Vue中如何使用方法、計(jì)算屬性或觀察者的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-10-10
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
vue3?HighCharts自定義封裝之徑向條形圖的實(shí)戰(zhàn)過(guò)程
highcharts是國(guó)外知名基于javascript的圖表庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue3?HighCharts自定義封裝之徑向條形圖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車(chē)牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
基于element-UI input等組件寬度修改方式
這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
簡(jiǎn)單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）
這篇文章主要介紹了簡(jiǎn)單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
Vue中插槽和過(guò)濾器的深入講解
Vue插槽,是學(xué)習(xí)vue中必不可少的一節(jié),越來(lái)越發(fā)現(xiàn)插槽的好用,而過(guò)濾數(shù)據(jù)也是我們?nèi)粘ｉ_(kāi)發(fā)中必然會(huì)用到的,這篇文章主要給大家介紹了關(guān)于Vue插槽和過(guò)濾器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07