uni-app中onBackPress()監(jiān)聽頁面返回(更新數據)

更新時間：2023年10月31日 08:54:51 作者：假裝是個web狗

這篇文章主要給大家介紹了關于uni-app中onBackPress()監(jiān)聽頁面返回(更新數據)的相關資料,在UniApp中,可以通過監(jiān)聽頁面刷新的生命周期函數來監(jiān)聽頁面的返回,然后重新調用接口進行刷新,需要的朋友可以參考下

生命周期 - onBackPress() 監(jiān)聽頁面返回

函數名	說明	平臺差異說明
onBackPress	監(jiān)聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack ；詳細說明及使用：onBackPress 詳解。支付寶小程序只有真機能觸發(fā)，只能監(jiān)聽非navigateBack引起的返回，不可阻止默認行為。	app、H5、支付寶小程序

基礎用法：注意返回值 options

onBackPress(options) {
	/**
	 * 由于 uni.navigateBack() 同樣會觸發(fā) onBackPress 函數。因此在 onBackPress 中直接調用 uni.navigateBack() 并始終返回 true 會引發(fā)死循環(huán)。
	 * 此時，需要根據 onBackPress 的回調對象中的 from 值來做處理，當來源是 'navigateBack' 時，返回 false。
	*/
	if (options.from === 'navigateBack') {
		return false;
	}
}

返回刷新數據

本級頁面：例如詳情頁

// 返回上一頁刷新頁面數據
// <!-- 返回方法  -->
onBackPress(options) {
	/**
	 * 由于 uni.navigateBack() 同樣會觸發(fā) onBackPress 函數。
	 * 因此在 onBackPress 中直接調用 uni.navigateBack() 并始終返回 true 會引發(fā)死循環(huán)。
	 * 此時，需要根據onBackPress的回調對象中的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 刷新數據
		prevPage.isRefresh = true   //修改上一頁data里面的參數值為true
		uni.navigateBack({ //uni.navigateTo跳轉的返回，默認1為返回上一級
			delta: 1
		});
		// 2. 也可以直接調用方法-成功返回后，用$vm.調用上一個頁面的方法名，進行頁面刷新
		uni.navigateBack({ //uni.navigateTo跳轉的返回，默認1為返回上一級
			delta: 1,
			success:(event)=>{
				prevPage.$vm.getData();  // getData 是自己對應的方法名
			}
		});
	}
}

上級頁面：例如列表頁

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) {
			// 重新獲取數據
			console.log("重新獲取數據",this.isRefresh)
			// this.getData() // 獲取列表數據
			// 每一次需要清除，否則會參數會緩存
			currPage.isRefresh = false
		}
		console.log(this.isRefresh)
	},
}