快捷導(dǎo)航

uniapp使用navigateBack方法返回上級(jí)頁面并刷新的簡單示例

更新時(shí)間：2023年03月28日 09:47:29 作者：今后剛睡醒

最近寫uniapp項(xiàng)目的時(shí)候發(fā)現(xiàn)有時(shí)候需要更新頁面數(shù)據(jù),所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用navigateBack方法返回上級(jí)頁面并刷新的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

分析:一般調(diào)用navigateBack返回上一頁時(shí)有兩種情況

不需刷新:查看內(nèi)容,狀態(tài)未改變.
需刷新:在第二頁編輯后,上一頁列表中與之對(duì)應(yīng)的數(shù)據(jù)狀態(tài)一起改變

目前想出的方案是在回退之前修改上頁判斷條件,回退后重新獲取判斷條件在決定是否刷新。

示例:

詳情頁

修改狀態(tài)成功后,準(zhǔn)備回退到上一頁之前,將上一頁的是否刷新參數(shù)值改為是的狀態(tài)

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];//上一個(gè)頁面
//直接調(diào)用上一個(gè)頁面的setData()方法，把數(shù)據(jù)存到上一個(gè)頁面中去
prevPage.setData({
	 isRefresh: 1 
})
// 再根據(jù)需求，確定返回上一頁面
wx.navigateBack({
	delta: 1
})

列表頁

需要在onshow鉤子中獲取判斷條件

export default{
	data(){
		return{
    		isRefresh:false
		}
	},
	onShow(){  
		// 如果是提交狀態(tài)返回isRefresh=1，才刷新頁面，從詳情過來無需刷新
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		if(currPage.__data__.isRefresh){
			// 重新獲取數(shù)據(jù)
			this.getData(true)//獲取列表數(shù)據(jù)
			// 每一次需要清除，否則會(huì)參數(shù)會(huì)緩存
        	currPage.__data__.isRefresh=false
		}
	}
}

附：uniapp刷新頁面后使用uni.navigateBack()無法返回上個(gè)頁面

最近寫uniapp項(xiàng)目的時(shí)候發(fā)現(xiàn)有時(shí)候需要更新頁面數(shù)據(jù)，我是用h5強(qiáng)制刷新頁面后就無法返回上一個(gè)頁面，查了文檔后發(fā)現(xiàn)是頁面棧丟失問題。百度看了很多大佬們的方法，方法基本一致，使用原生JS的history對(duì)象，封裝一個(gè)兼容uniapp api和原生js的返回的方法。在此記錄一下

方法

let canNavBack = getCurrentPages()
if( canNavBack && canNavBack.length>1) {  
    uni.navigateBack() 
} else {  
    history.back();  
} 
//在返回的方法里替換

總結(jié)

到此這篇關(guān)于uniapp使用navigateBack方法返回上級(jí)頁面并刷新的文章就介紹到這了,更多相關(guān)uniapp用navigateBack返回上一頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: