ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App
在安卓下,如果不處理系統(tǒng)返回鍵的事件,那么每次點(diǎn)擊返回鍵,將頁面將返回到上一個(gè)路由,這種邏輯不符合app的路由邏輯。正確的應(yīng)該是:當(dāng)頁面到了各個(gè)導(dǎo)航頁的首頁時(shí),此時(shí)再按返回鍵應(yīng)該提示是否退出app,用戶點(diǎn)擊確認(rèn)后退出app。
在run()方法中添加下面的方法
$ionicPlatform.registerBackButtonAction(function (e){
//阻止默認(rèn)的行為
e.preventDefault();
// 退出提示框
function showConfirm() {
var servicePopup = $ionicPopup.show({
title: '提示',
subTitle: '你確定要退出應(yīng)用嗎?',
scope: $rootScope,
buttons: [
{
text: '取消',
type: 'button-clear button-assertive',
onTap: function () {
return 'cancel';
}
},
{
text: '確認(rèn)',
type: 'button-clear button-assertive border-left',
onTap: function (e) {
return 'active';
}
},
]
});
servicePopup.then(function (res) {
if (res == 'active') {
// 退出app
ionic.Platform.exitApp();
}
});
}
// 判斷當(dāng)前路由是否為各個(gè)導(dǎo)航欄的首頁,是的話則顯示提示框
if ($location.path() == '/index' || $location.path() == '/product' || $location.path() == '/account' || $location.path() == '/more') {
showConfirm();
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
showConfirm();
}
return false;
}, 101); //101優(yōu)先級(jí)常用于覆蓋‘返回上一個(gè)頁面'的默認(rèn)行為
$ionicPlatform.registerBackButtonAction()
該方法是用來注冊系統(tǒng)返回鍵事件。每次點(diǎn)擊只會(huì)執(zhí)行最高優(yōu)先級(jí)的那個(gè)行為。比如當(dāng)頁面存在一個(gè)modal框的時(shí)候,此時(shí)點(diǎn)擊系統(tǒng)返回鍵則是關(guān)閉modal框,而不是返回上個(gè)視圖。
ionic官方已經(jīng)定義了常用的行為的優(yōu)先級(jí):
- 返回上個(gè)視圖=100;
- 關(guān)閉側(cè)欄菜單=150;
- 關(guān)閉Modal=200;
- 關(guān)閉 action sheet=300;
- 關(guān)閉popup=400;
- 關(guān)閉loading=500;
用法如下:
registerBackButtonAction(callback, priority, [actionId])
所以當(dāng)你要重寫ionic官方定義上面那些行為,你只需要設(shè)置優(yōu)先級(jí)大于那些行為的優(yōu)先級(jí)即可。比如你要覆蓋的是返回上個(gè)視圖的行為,那么你只需要傳入的proirity的值大于100(同時(shí)要小于150)即可。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript中的鏈?zhǔn)秸{(diào)用
這篇文章主要介紹了JavaScript中的鏈?zhǔn)秸{(diào)用的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-11-11
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實(shí)例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-04-04
JavaScript從數(shù)組的indexOf()深入之Object的Property機(jī)制
這篇文章主要介紹了JavaScript從數(shù)組的indexOf()深入——Object的Property機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-05-05
package.json與package-lock.json的區(qū)別及詳細(xì)解釋
不知道大家平時(shí)在開發(fā)中有沒有注意到,你的項(xiàng)目中有兩個(gè)文件:package.json,package-lock.json,應(yīng)該很多人平時(shí)都不會(huì)去關(guān)注這兩個(gè)文件有啥關(guān)系吧,這篇文章主要給大家介紹了關(guān)于package.json與package-lock.json的區(qū)別及詳細(xì)解釋,需要的朋友可以參考下2022-08-08
微信小程序?qū)崿F(xiàn)五星評(píng)價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五星評(píng)價(jià),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
深入理解JavaScript系列(29):設(shè)計(jì)模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列(29):設(shè)計(jì)模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對(duì)象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對(duì)象調(diào)用(例如裝飾者的構(gòu)造函數(shù)),需要的朋友可以參考下2015-03-03

