如何在uniapp返回上一頁時刷新數據

一、使用uni.navigateBack()實現返回上一頁

在uniapp中，要實現返回上一頁的操作，可以使用uni.navigateBack()方法。

uni.navigateBack({
  delta: 1, // 返回的頁面數，如果為1表示返回上一頁
  success: function () {
    console.log('返回上一頁並刷新數據成功');
  }
});

這裡的delta表示要返回的頁面數，如果為1表示返回上一頁。如果當前頁面棧中有多個頁面，可以設置delta為需要返回的頁面數量。

二、在onBackPress鉤子中實現刷新數據

當我們使用uni.navigateBack()方法返回上一頁時，可以在上一頁的onBackPress鉤子函數中實現數據的刷新操作。

onBackPress: function() {
  this.refreshData();
  return true; // 必須返回true，否則頁面將無法返回
},
refreshData: function() {
  // 刷新數據的邏輯代碼
}

當我們從下一頁返回上一頁時，onBackPress鉤子函數會被觸發。在這個鉤子函數中，我們可以調用refreshData()方法來刷新數據。注意，這裡必須返回true，否則頁面將無法返回。

三、在onUnload鉤子中實現刷新數據

當我們使用uni.navigateBack()方法返回上一頁時，也可以在上一頁的onUnload鉤子函數中實現數據的刷新操作。

onUnload: function() {
  this.refreshData();
},
refreshData: function() {
  // 刷新數據的邏輯代碼
}

當我們從下一頁返回上一頁時，上一頁的onUnload鉤子函數會被觸發。在這個鉤子函數中，我們可以調用refreshData()方法來刷新數據。

四、使用eventBus實現跨頁面通信

如果我們的頁面之間需要跨頁面通信，比如從下一頁返回上一頁時需要刷新數據，我們可以使用eventBus來實現。

在main.js中，創建一個全局的eventBus：

import Vue from 'vue';
export const eventBus = new Vue();

在需要發送數據的頁面中，將數據發送到eventBus上：

import { eventBus } from '@/main.js';
eventBus.$emit('refreshData', data);

在需要接收數據的頁面中，監聽eventBus的事件，接收數據並刷新頁面：

import { eventBus } from '@/main.js';
eventBus.$on('refreshData', (data) => {
  this.data = data;
});

這樣，當數據發送到eventBus上時，其他頁面就會收到數據並刷新頁面。