快捷導(dǎo)航

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

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

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

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

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

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

示例:

詳情頁(yè)

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

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

列表頁(yè)

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

export default{
	data(){
		return{
    		isRefresh:false
		}
	},
	onShow(){  
		// 如果是提交狀態(tài)返回isRefresh=1，才刷新頁(yè)面，從詳情過(guò)來(lái)無(wú)需刷新
		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刷新頁(yè)面后使用uni.navigateBack()無(wú)法返回上個(gè)頁(yè)面

最近寫uniapp項(xiàng)目的時(shí)候發(fā)現(xiàn)有時(shí)候需要更新頁(yè)面數(shù)據(jù)，我是用h5強(qiáng)制刷新頁(yè)面后就無(wú)法返回上一個(gè)頁(yè)面，查了文檔后發(fā)現(xiàn)是頁(yè)面棧丟失問(wè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í)頁(yè)面并刷新的文章就介紹到這了,更多相關(guān)uniapp用navigateBack返回上一頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: