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

