????? 作者簡介：程序員半夏 , 一名全棧程序員，擅長使用各種編程語言和框架，如JavaScript、React、Node.js、Java、Python、Django、MySQL等.專注于大前端與后端的硬核干貨分享,同時是一個隨緣更新的UP主. 你可以在各個平臺找到我!
?? 本文收錄于專欄: uniapp踩坑指南
?? 專欄介紹: 本專欄提供了uni-app開發(fā)過程中必不可少的組件和解決方案。本書詳細介紹了各種常用組件的使用方法和技巧，以及如何應(yīng)對uniapp開發(fā)中遇到的各種問題。
場景
假設(shè)我們有A和B兩個頁面，A頁面是一個列表，B頁面是從A頁面點擊某個列表項進入的，當我們在B頁面操作完之后，需要返回A頁面，此時需要刷新A頁面的數(shù)據(jù)。
方法1：getCurrentPages
介紹
在uni-app中，getCurrentPages()方法用于獲取當前頁面棧的實例數(shù)組。頁面棧是指打開的頁面的層級關(guān)系，當前頁面在數(shù)組中的索引為pages.length - 1，上一頁在數(shù)組中的索引為pages.length - 2，以此類推。
getCurrentPages()方法返回的是一個頁面棧數(shù)組，數(shù)組中的每個元素都是一個頁面實例，包含了頁面的數(shù)據(jù)和方法。通過獲取頁面棧數(shù)組，我們可以根據(jù)索引獲取到上一頁的實例，然后可以調(diào)用上一頁的方法或訪問上一頁的數(shù)據(jù)。
具體流程如下：
- 調(diào)用
getCurrentPages()方法獲取當前頁面棧的實例數(shù)組：
var pages = getCurrentPages();
- 使用
pages.length - 2獲取上一頁的索引，然后通過pages[beforePage]獲取上一頁的實例：
var beforePage = pages[pages.length - 2];
- 通過上一頁的實例，可以訪問上一頁的數(shù)據(jù)和方法，例如：
beforePage.data // 可以訪問上一頁的數(shù)據(jù)
beforePage.method() // 可以調(diào)用上一頁的方法
通過以上步驟，我們可以獲取到上一頁的實例，并進行相應(yīng)的操作。這樣就可以實現(xiàn)在當前頁返回上一頁并刷新數(shù)據(jù)的功能。
代碼演示
- 在A頁面的methods中，編寫獲取數(shù)據(jù)的邏輯。
<script>
export default {
data() {
return {
dataList: [] // A頁面的數(shù)據(jù)列表
}
},
methods: {
getData() {
// 發(fā)送請求獲取數(shù)據(jù)，并更新dataList
}
}
}
</script>
- 在A頁面的列表項上添加點擊事件，跳轉(zhuǎn)到B頁面，并傳遞需要的參數(shù)。
<template>
<view>
<!-- A頁面的列表 -->
<view v-for="(item, index) in dataList" :key="index" @click="goToB(item)">
<!-- 列表項的內(nèi)容 -->
</view>
</view>
</template>
<script>
export default {
methods: {
goToB(item) {
uni.navigateTo({
url: '/pages/BPage?id=' + item.id // 跳轉(zhuǎn)到B頁面，并傳遞參數(shù)
})
}
}
}
</script>
- 在B頁面中，完成相應(yīng)的操作后，通過uni.navigateBack方法返回A頁面。
<script>
export default {
methods: {
goBack() {
var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
uni.navigateBack({
success: function() {
beforePage.getData();
}
});
}
}
}
</script>
這樣，當點擊返回按鈕時，會返回上一頁并調(diào)用上一頁的getData函數(shù)來刷新數(shù)據(jù)。
報錯not a function？請注意?。。?/h3>
在uni-app中是適配多端的,beforePage.getData();只在h5中有效，在app端和微信小程序端都會報錯 getData not a function；
在APP端和微信小程序需要加上
beforePage.$vm.
修改后完整的代碼如下
var pages = getCurrentPages();
var beforePage = pages[pages.length - 2];
uni.navigateBack({
success: function() {
// #ifdef H5
beforePage.getData()
// #endif
// #ifndef H5
beforePage.$vm.getData()
// #endif
}
});
注意2：Android端執(zhí)行之后報Cannot read property ‘$vm’ of undefined
在完成代碼編寫后，保存并重新加載軟件后，上一頁已經(jīng)不存在了。此時，只需要退出軟件并重新進入即可解決問題。
方法2 ：onshow
介紹
onshow屬于uni-app的頁面生命周期: 監(jiān)聽頁面顯示，頁面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級頁面點返回露出當前頁面
onshow是一個會重復觸發(fā)的事件。a頁面剛進入時，會觸發(fā)a頁面的onShow。從其他頁面跳轉(zhuǎn)或者返回a頁面，會再次觸發(fā)onShow。
代碼演示
- 在A頁面的onShow生命周期函數(shù)中，編寫獲取數(shù)據(jù)的邏輯。這樣每次返回A頁面時都會重新獲取最新的數(shù)據(jù)。
<script>
export default {
data() {
return {
dataList: [] // A頁面的數(shù)據(jù)列表
}
},
onShow() {
// 獲取數(shù)據(jù)的邏輯，例如發(fā)送請求獲取最新數(shù)據(jù)
this.getData()
},
methods: {
getData() {
// 發(fā)送請求獲取數(shù)據(jù)，并更新dataList
}
}
}
</script>
- 在A頁面的列表項上添加點擊事件，跳轉(zhuǎn)到B頁面，并傳遞需要的參數(shù)。
<template>
<view>
<!-- A頁面的列表 -->
<view v-for="(item, index) in dataList" :key="index" @click="goToB(item)">
<!-- 列表項的內(nèi)容 -->
</view>
</view>
</template>
<script>
export default {
methods: {
goToB(item) {
uni.navigateTo({
url: '/pages/BPage?id=' + item.id // 跳轉(zhuǎn)到B頁面，并傳遞參數(shù)
})
}
}
}
</script>
- 在B頁面中，完成相應(yīng)的操作后，通過uni.navigateBack方法返回A頁面。
<script>
export default {
methods: {
goBack() {
// 完成操作后返回A頁面
uni.navigateBack({
delta: 1 // 返回的頁面數(shù)，如果是返回上一級頁面，delta為1
})
}
}
}
</script>
- 在A頁面的onShow生命周期函數(shù)中，重新獲取數(shù)據(jù)，以刷新A頁面的數(shù)據(jù)。
通過以上步驟，當從B頁面返回A頁面時，A頁面的onShow生命周期函數(shù)會被觸發(fā)，重新獲取數(shù)據(jù)并刷新頁面。這樣就實現(xiàn)了從B頁面返回A頁面并刷新A頁面數(shù)據(jù)的功能。
缺點
雖然onShow生命周期函數(shù)在實現(xiàn)從B頁面返回A頁面并刷新數(shù)據(jù)的功能時非常方便，但也存在一些缺點：
-
不適用于首次加載：onShow生命周期函數(shù)在頁面每次顯示時都會觸發(fā)，包括首次加載和從其他頁面返回。如果A頁面是首次加載時需要獲取數(shù)據(jù)，onShow生命周期函數(shù)會在每次返回A頁面時都觸發(fā)獲取數(shù)據(jù)的邏輯，導致數(shù)據(jù)重復獲取和頁面重復刷新。
-
無法傳遞參數(shù)：onShow生命周期函數(shù)沒有參數(shù)傳遞的機制，無法在返回A頁面時傳遞參數(shù)給onShow函數(shù)，因此無法根據(jù)傳遞的參數(shù)來決定是否需要刷新數(shù)據(jù)，或者刷新哪些數(shù)據(jù)。
-
頁面切換時性能開銷：在返回A頁面時，onShow生命周期函數(shù)會被觸發(fā)，這可能會導致頁面在切換時出現(xiàn)短暫的卡頓或延遲，特別是當A頁面的數(shù)據(jù)量較大或需要進行復雜的數(shù)據(jù)處理時。
-
無法精確控制刷新時機：onShow生命周期函數(shù)的觸發(fā)時機是在頁面顯示時，無法精確控制刷新數(shù)據(jù)的時機。如果需要在B頁面完成某個操作后立即刷新A頁面的數(shù)據(jù)，使用onShow生命周期函數(shù)無法滿足需求。文章來源：http://www.zghlxwxcb.cn/news/detail-753514.html
綜上所述，雖然onShow生命周期函數(shù)在一些簡單的場景下可以方便地實現(xiàn)從B頁面返回A頁面并刷新數(shù)據(jù)，但在復雜的場景下可能存在一些缺點和不足。在實際開發(fā)中，可以根據(jù)具體需求選擇合適的數(shù)據(jù)刷新方案，例如使用事件總線、vuex等來進行數(shù)據(jù)傳遞和管理，或者使用自定義的生命周期函數(shù)來實現(xiàn)更精確的控制。文章來源地址http://www.zghlxwxcb.cn/news/detail-753514.html
到了這里，關(guān)于uni-app -移動端H5小程序 關(guān)閉當前頁，返回上一頁并調(diào)用上一頁的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
