快捷導(dǎo)航

uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)

更新時(shí)間：2023年11月29日 09:13:47 作者：老馬甲

本文主要介紹了uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、前言

在移動(dòng)端中，數(shù)據(jù)列表中某項(xiàng)數(shù)據(jù)點(diǎn)擊編輯，進(jìn)入下一個(gè)頁(yè)面編輯數(shù)據(jù)，保存后回退到數(shù)據(jù)列表頁(yè)，此時(shí)需要刷新列表數(shù)據(jù)，否則顯示的列表數(shù)據(jù)還是舊的。這種場(chǎng)景感覺(jué)很多地方都有出現(xiàn)，是需要詳細(xì)說(shuō)說(shuō)方法，也就是uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)。

1.1、uni.navigateBack

二、方法

2.1、父頁(yè)面設(shè)置鉤子函數(shù)`onBackPress`

詳細(xì)文檔可點(diǎn)擊【跳轉(zhuǎn)】，適用于刷新多處數(shù)據(jù)

export default {
    onBackPress(options) {
        this.refreshData();
    },
    methods:{
        refreshData: function() {
            //加載數(shù)據(jù)
        }
    }
}

2.2、uni.$emit和uni.$on監(jiān)聽(tīng)通知數(shù)據(jù)變更

2.2.1、子頁(yè)面

子頁(yè)面在需要返回上一頁(yè)面的地方寫入uni.navigateBack，然后在success回調(diào)中uni.$emit發(fā)送數(shù)據(jù)更新通知

uni.navigateBack({
    delta: 1, // 返回層數(shù)，2則上上頁(yè)
    success() {
        uni.$emit('update',{msg:'頁(yè)面更新'})
    }
})

2.2.2、父頁(yè)面

父頁(yè)面在初始化時(shí)uni.$on監(jiān)聽(tīng)數(shù)據(jù)更新，在回調(diào)函數(shù)中處理數(shù)據(jù)。在頁(yè)面銷毀時(shí)移除監(jiān)聽(tīng)

export default {
    mounted() {
        uni.$on('update', function(data) {
            //觸發(fā)更新后
        })
    },
    //為了優(yōu)化代碼，可以加上移除事件，避免重復(fù)監(jiān)聽(tīng)事件
    onUnload() {
        // 移除監(jiān)聽(tīng)事件  
        uni.$off('update');
    }
}

2.3、onShow鉤子函數(shù)處理數(shù)據(jù)

2.3.1、子頁(yè)面

準(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è)面
uni.navigateBack({
    delta: 1
})

2.3.2、父頁(yè)面

在onShow鉤子函數(shù)中獲取判斷條件

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
		}
	}
}

2.4、注意

如果出現(xiàn)數(shù)據(jù)沒(méi)有更新，可以使用$forceUpdate或者先置空數(shù)據(jù)再賦值數(shù)據(jù)，大概率是數(shù)據(jù)沒(méi)有響應(yīng)

最后

到此這篇關(guān)于uniapp中uni.navigateBack返回后刷新頁(yè)面數(shù)據(jù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uniapp uni.navigateBack返回刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: