uniapp強制刷新當前頁面

一、uniapp小程序刷新當前頁面

在uniapp小程序中刷新當前頁面可以使用uni.navigateBack方法，其會關閉當前頁面並跳轉到上一級頁面，然後通過uni.navigateTo或uni.redirectTo再次打開當前頁面實現刷新效果。

uni.navigateBack({
  delta: 1,
  success: function () {
    uni.navigateTo({
      url: '/pages/currentPage/currentPage'
    })
  }
});

這裡delta參數代表返回的頁面數，如果當前頁面是第一級頁面，則返回到應用首頁。接下來再通過uni.navigateTo或uni.redirectTo打開當前頁，即可實現刷新效果。

二、uniapp刷新當前頁面

在uniapp中，可以通過監聽當前頁面的生命周期函數onShow，並在其中利用uni.pageScrollTo方法將頁面滾動至頂部，從而實現刷新頁面的效果：

onShow(){
   uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
    })
}

這裡的uni.pageScrollTo方法用於滾動頁面，scrollTop表示滾動的距離，duration表示滾動的時間。因為duration為0，所以滾動是瞬間完成的，頁面也就刷新了。

三、uniapp如何實現刷新當前頁面數據

在uniapp中，為了實現局部更新，可以使用v-if指令控制組件的顯示和隱藏，從而實現數據的刷新。具體做法是在刷新數據之後，通過v-if指令重新渲染組件，從而達到刷新數據的效果。

  
    
  



export default {
  data() {
    return {
      showComponent: true,
      componentData: []
    };
  },
  methods: {
    refreshData(){
      // 刷新數據
      this.componentData = [...];
      // 重新渲染組件
      this.showComponent = false;
      uni.nextTick(() => {
        this.showComponent = true;
      });
    }
  }
}

四、uniapp怎麼刷新當前頁面

除了利用v-if指令控制組件的顯示和隱藏實現刷新數據外，還可以在代碼中調用this.$forceUpdate()方法強制刷新當前頁面：

methods: {
  refreshData(){
    // 刷新數據
    this.componentData = [...];
    // 強制刷新頁面
    this.$forceUpdate();
  }
}

注意，該方法只能刷新組件的數據，無法刷新組件模板中靜態的HTML代碼。

五、uniapp刷新本頁面

如果需要在當前頁面刷新數據，可以使用uni.setStorageSync方法將數據更新到本地緩存中，然後再通過頁面生命周期函數onShow獲取本地緩存中的數據並更新頁面：

onShow(){
  // 從本地緩存中獲取數據
  let data = uni.getStorageSync('data');
  // 更新數據
  this.componentData = data;
}

在其他頁面修改數據時，也可以通過uni.setStorageSync方法將更新後的數據存儲到本地緩存中，然後在返回當前頁面時調用onShow方法更新數據。

六、uniapp頁面強制重新載入

如果需要強制刷新整個頁面，可以通過uni.reLaunch方法實現，該方法會關閉所有頁面，然後打開指定的頁面：

uni.reLaunch({
  url: '/pages/currentPage/currentPage'
});

這裡的url參數指定的是要打開的頁面路徑，因為是關閉所有頁面，所以打開的是應用的首頁，然後通過uni.navigateTo或uni.redirectTo打開當前頁面，實現整個頁面的刷新。

七、uniapp切換tab頁面不刷新

在uniapp中，tabBar頁面之間切換時，並不會觸發頁面的生命周期函數onLoad和onShow，所以頁面並不會重新載入。如果需要在切換tab頁面時刷新數據，可以通過uni.$emit和uni.$on方法實現跨頁面通信，具體做法如下：

// 在需要刷新的頁面中監聽'pageRefresh'事件
export default {
  created() {
    uni.$on('pageRefresh', () => {
      // 執行刷新邏輯
      ...
    })
  }
}

// 在tabBar頁面中切換tab時，觸發'pageRefresh'事件，通知需要刷新的頁面
export default {
  methods: {
    switchTab() {
      uni.$emit('pageRefresh');
      uni.switchTab({
        url: '/pages/tabPage/tabPage'
      })
    }
  }
}

在需要刷新的頁面中監聽’pageRefresh’事件，在tabBar頁面中切換tab時，觸發’pageRefresh’事件並跳轉到需要刷新的頁面，這樣就能實現在切換tab頁面時強制刷新數據的效果。