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 值來做處理,當(dāng)來源是 '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值來做處理,當(dāng)來源是'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]; //當(dāng)前頁頁面實例 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-01setTimeout()遞歸調(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-10JS實現(xiàn)網(wǎng)頁標(biāo)題隨機顯示名人名言的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁標(biāo)題隨機顯示名人名言的方法,涉及JavaScript中字符串、數(shù)組及隨機數(shù)的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11