快捷導(dǎo)航

uniapp中刷新本頁(yè)面的三種方法

更新時(shí)間：2023年10月11日 15:54:46 作者：DC...

這篇文章主要給大家介紹了關(guān)于uniapp中刷新本頁(yè)面的三種方法,刷新頁(yè)面的具體邏輯可以根據(jù)實(shí)際需求進(jìn)行編寫,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

方法一

利用路由，強(qiáng)制uniapp刷新當(dāng)前頁(yè)面

setTimeout(() => {
	this.$router.go(0)
}, 500)

方法二

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某給頁(yè)面（如果想刷新當(dāng)前頁(yè)面也可以使用該方法）：

uni.redirectTo({
    url: '../details/details?gid=' + this.gid //寫你的路徑
});

還可用定時(shí)器來(lái)對(duì)該方法進(jìn)行優(yōu)化，使其稍微延緩動(dòng)畫

setTimeout( () => {
    uni.redirectTo({
       url: '../details/details?gid=' + this.gid
    });	
}, 500)

方法三

通過(guò)獲取該頁(yè)面實(shí)例執(zhí)行其內(nèi)部的生命周期方法來(lái)刷新頁(yè)面

    reload() {
        // 頁(yè)面重載
        const pages = getCurrentPages()
        // 聲明一個(gè)pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 聲明一個(gè)當(dāng)前頁(yè)面
        curPage.onLoad(curPage.options) // 傳入?yún)?shù)
        curPage.onShow()
        curPage.onReady()
        // 執(zhí)行刷新
    },

補(bǔ)充：uniapp如何根據(jù)路由手動(dòng)onload刷新某一個(gè)頁(yè)面

uniapp如何手動(dòng)刷新要跳轉(zhuǎn)到的頁(yè)面？相信很多人百度查到的答案都是如下：

uni.switchTab({
  url: '/pages/user/user',
  success(){
	     let page = getCurrentPages().pop(); //跳轉(zhuǎn)頁(yè)面成功之后
             if (!page) return;  
             page.onLoad(); //重新刷新頁(yè)面
	  }
});

但是在我做的項(xiàng)目中，會(huì)出現(xiàn)莫名的bug，pop出來(lái)的頁(yè)面不是想要的，而且后面修改頁(yè)面跳轉(zhuǎn)的時(shí)候可能要修改代碼，根據(jù)頁(yè)面棧pop出來(lái)頁(yè)面刷新很難定位刷新到我們想要的頁(yè)面。那么有沒(méi)有什么辦法可以根據(jù)路由定位到我們要刷新的頁(yè)面呢，根據(jù)官方api，我們可以獲取已渲染加載的頁(yè)面數(shù)組let pages = getCurrentPages（），同時(shí)每一個(gè)頁(yè)面都有page.route（）獲取該頁(yè)面的路由。所有我們只要遍歷已渲染加載的pages，再比較pages里面的路由在調(diào)用相應(yīng)頁(yè)面的onload事件就好了，代碼如下：

uni.switchTab({
				url : '/pages/test/test',
				success() {
					let pages = getCurrentPages();
					for(let i = 0; i < pages.length; i ++){
						let tmppg = pages[i];
						if(tmppg.route == "pages/test/test"){
							tmppg.onLoad();
						}
						// console.log('tmppg:' + tmppg)
						// console.log('tmppg.route:' + tmppg.route)
					}
				}
			})