uni-app中onBackPress()監(jiān)聽頁面返回(更新數(shù)據(jù))
生命周期 - onBackPress() 監(jiān)聽頁面返回
| 函數(shù)名 | 說明 | 平臺(tái)差異說明 |
|---|---|---|
| onBackPress | 監(jiān)聽頁面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示來源是左上角返回按鈕或 android 返回鍵;navigateBack表示來源是 uni.navigateBack ;詳細(xì)說明及使用:onBackPress 詳解。支付寶小程序只有真機(jī)能觸發(fā),只能監(jiān)聽非navigateBack引起的返回,不可阻止默認(rèn)行為。 | app、H5、支付寶小程序 |
- 基礎(chǔ)用法 :注意 返回值 options
onBackPress(options) {
/**
* 由于 uni.navigateBack() 同樣會(huì)觸發(fā) onBackPress 函數(shù)。因此在 onBackPress 中直接調(diào)用 uni.navigateBack() 并始終返回 true 會(huì)引發(fā)死循環(huán)。
* 此時(shí),需要根據(jù) onBackPress 的回調(diào)對(duì)象中的 from 值來做處理,當(dāng)來源是 'navigateBack' 時(shí),返回 false。
*/
if (options.from === 'navigateBack') {
return false;
}
}
返回刷新數(shù)據(jù)
- 本級(jí)頁面: 例如詳情頁
// 返回上一頁刷新頁面數(shù)據(jù)
// <!-- 返回方法 -->
onBackPress(options) {
/**
* 由于 uni.navigateBack() 同樣會(huì)觸發(fā) onBackPress 函數(shù)。
* 因此在 onBackPress 中直接調(diào)用 uni.navigateBack() 并始終返回 true 會(huì)引發(fā)死循環(huán)。
* 此時(shí),需要根據(jù)onBackPress的回調(diào)對(duì)象中的from值來做處理,當(dāng)來源是'navigateBack'時(shí),返回 false 。
*/
console.log("----------onBackPress---------", options)
if (options.from === 'navigateBack') {
return false;
}
this.back();
return true;
},
methods: {
back() {
let pages = getCurrentPages(); //獲取所有頁面棧實(shí)例列表
let nowPage = pages[pages.length - 1]; //當(dāng)前頁頁面實(shí)例
let prevPage = pages[pages.length - 2]; //上一頁頁面實(shí)例
console.log(prevPage)
// 1. 改變值-在上一個(gè)頁面 onShow 刷新數(shù)據(jù)
prevPage.isRefresh = true //修改上一頁data里面的參數(shù)值為true
uni.navigateBack({ //uni.navigateTo跳轉(zhuǎn)的返回,默認(rèn)1為返回上一級(jí)
delta: 1
});
// 2. 也可以直接調(diào)用方法-成功返回后,用$vm.調(diào)用上一個(gè)頁面的方法名,進(jìn)行頁面刷新
uni.navigateBack({ //uni.navigateTo跳轉(zhuǎn)的返回,默認(rèn)1為返回上一級(jí)
delta: 1,
success:(event)=>{
prevPage.$vm.getData(); // getData 是自己對(duì)應(yīng)的方法名
}
});
}
}- 上級(jí)頁面: 例如列表頁
export default{
data(){
return{
isRefresh:false
}
},
// 上一個(gè)頁面onShow
onShow() {
console.log('onShow')
// this.h = uni.getSystemInfoSync().windowHeight - 135;
// 返回刷新
// 如果是提交狀態(tài)返回isRefresh=1,才刷新頁面
let pages = getCurrentPages();
let currPage = pages[pages.length - 1];
if (currPage.isRefresh) {
// 重新獲取數(shù)據(jù)
console.log("重新獲取數(shù)據(jù)",this.isRefresh)
// this.getData() // 獲取列表數(shù)據(jù)
// 每一次需要清除,否則會(huì)參數(shù)會(huì)緩存
currPage.isRefresh = false
}
console.log(this.isRefresh)
},
}總結(jié)
到此這篇關(guān)于uni-app中onBackPress()監(jiān)聽頁面返回(更新數(shù)據(jù))的文章就介紹到這了,更多相關(guān)uni-app onBackPress()監(jiān)聽頁面返回內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript靜態(tài)頁面?zhèn)髦档娜N方法分享
這篇文章介紹了javascript靜態(tài)頁面?zhèn)髦档娜N方法及優(yōu)缺點(diǎn),有需要的朋友可以參考一下2013-11-11
七個(gè)基于JavaScript實(shí)現(xiàn)的情人節(jié)表白特效
情人節(jié)將至 程序員證明自己不是直男的時(shí)候到啦 我們也有自己的專屬代碼浪漫。本文將介紹七個(gè)利用JavaScript實(shí)現(xiàn)的情人節(jié)表白特效,需要的可以參考一下2022-01-01
簡(jiǎn)單實(shí)現(xiàn)JavaScript圖片切換效果
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)JavaScript圖片切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
JavaScript中的單引號(hào)和雙引號(hào)報(bào)錯(cuò)的解決方法
數(shù)據(jù)中夾雜單引號(hào)(')或者雙引號(hào)("),這種語句往往會(huì)造成JavaScript報(bào)錯(cuò)。對(duì)此一般采用/'或者/"的解決2014-09-09
setTimeout()遞歸調(diào)用不加引號(hào)出錯(cuò)的解決方法
用了setTimeout()想實(shí)現(xiàn)遞歸調(diào)用,如果第一個(gè)參數(shù)不加引號(hào)的話,就會(huì)出錯(cuò),下面與大家分享下該如何解決2014-09-09
微信小程序手機(jī)號(hào)授權(quán)一鍵登錄功能實(shí)現(xiàn)代碼
在微信小程序中實(shí)現(xiàn)手機(jī)號(hào)一鍵登錄功能,首先需要通過uni.login調(diào)用獲取微信的登錄憑證(code),然后將此code發(fā)送到服務(wù)端,本文給大家介紹微信小程序手機(jī)號(hào)授權(quán)一鍵登錄功能,感興趣的朋友跟隨小編一起看看吧2024-10-10
JS實(shí)現(xiàn)網(wǎng)頁標(biāo)題隨機(jī)顯示名人名言的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁標(biāo)題隨機(jī)顯示名人名言的方法,涉及JavaScript中字符串、數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11

