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)用接口進(jìn)行刷新,需要的朋友可以參考下
生命周期 - onBackPress() 監(jiān)聽頁面返回
| 函數(shù)名 | 說明 | 平臺差異說明 |
|---|---|---|
| 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() 同樣會觸發(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(); //獲取所有頁面棧實(shí)例列表
let nowPage = pages[pages.length - 1]; //當(dāng)前頁頁面實(shí)例
let prevPage = pages[pages.length - 2]; //上一頁頁面實(shí)例
console.log(prevPage)
// 1. 改變值-在上一個頁面 onShow 刷新數(shù)據(jù)
prevPage.isRefresh = true //修改上一頁data里面的參數(shù)值為true
uni.navigateBack({ //uni.navigateTo跳轉(zhuǎn)的返回,默認(rèn)1為返回上一級
delta: 1
});
// 2. 也可以直接調(diào)用方法-成功返回后,用$vm.調(diào)用上一個頁面的方法名,進(jìn)行頁面刷新
uni.navigateBack({ //uni.navigateTo跳轉(zhuǎn)的返回,默認(rè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)文章
JS獲取當(dāng)前時間的年月日時分秒及時間的格式化的方法
這篇文章主要介紹了js獲取當(dāng)前時間的年月日時分秒及時間的格式化,本文通過實(shí)例代碼講解的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
JavaScript實(shí)現(xiàn)各種排序的代碼詳解
這篇文章給大家介紹了js實(shí)現(xiàn)各種排序功能,包括冒泡排序,選擇排序和插入排序,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-08-08
JavaScript動態(tài)檢測密碼強(qiáng)度原理及實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動態(tài)檢測密碼強(qiáng)度原理及實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式詳細(xì)分析了javascript針對輸入字符串密碼強(qiáng)度檢測的原理與相關(guān)判斷操作技巧,需要的朋友可以參考下2019-06-06
JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析
本文是腳本之家小編日常整理些關(guān)于js兼容性問題,及IE與Firefox等常用瀏覽器的兼容性分析,對js瀏覽器兼容性相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03
JavaScript中數(shù)組Array.sort()排序方法詳解
本篇文章主要介紹了JavaScript中數(shù)組Array.sort()的排序方法。具有很好的參考價值,下面跟著小編一起來看下吧2017-03-03

