微信小程序：解决tabbar切换时，页面不刷新问题

在微信小程序中，默认情况下切换 tabBar 页面时，​页面不会重新加载或刷新 ​（而是保持之前的状态）。如果你需要在切换 tabBar 时触发数据刷新或重新执行某些逻辑，可以通过以下方法解决：

---

​方法 1：使用 onTabItemTap 生命周期函数

微信小程序的 Page 有一个 ​**onTabItemTap** 生命周期，专门用于监听 tabBar 的点击事件。当用户点击当前页面的 tabBar 时，会触发该函数。

​示例代码

Page({
  data: {
    refreshCount: 0
  },

  // 监听 tabBar 点击事件
  onTabItemTap() {
    console.log('TabBar 被点击了，刷新数据');
    this.loadData(); // 重新加载数据
  },

  loadData() {
    // 模拟数据刷新
    this.setData({
      refreshCount: this.data.refreshCount + 1
    });
    console.log('数据已刷新', this.data.refreshCount);
  }
})

​适用场景

• 适用于 当前页面 的 tabBar 被点击时刷新数据。
• 不会触发 其他 tabBar 页面的刷新。

---

​方法 2：使用 onShow 生命周期函数

每次页面 ​显示 时（包括首次进入、从其他页面返回、切换 tabBar），onShow 都会触发。可以在这里执行刷新逻辑。

​示例代码

Page({
  data: {
    refreshCount: 0
  },

  onShow() {
    console.log('页面显示，刷新数据');
    this.loadData();
  },

  loadData() {
    this.setData({
      refreshCount: this.data.refreshCount + 1
    });
    console.log('数据已刷新', this.data.refreshCount);
  }
})

​适用场景

• 适用于 每次页面显示时 都刷新数据（包括 tabBar 切换）。
• 如果只想在 tabBar 切换时刷新，可以结合 getCurrentPages() 判断是否来自 tabBar 切换。

---

​方法 3：结合 onHide 和 onShow 判断是否来自 tabBar 切换

如果希望 ​仅在 tabBar 切换时刷新 ，而不是每次 onShow 都刷新，可以记录页面是否隐藏过：

​示例代码

Page({
  data: {
    refreshCount: 0,
    isHidden: false // 记录页面是否被隐藏
  },

  onHide() {
    this.setData({ isHidden: true });
  },

  onShow() {
    if (this.data.isHidden) {
      console.log('来自 tabBar 切换，刷新数据');
      this.loadData();
      this.setData({ isHidden: false });
    }
  },

  loadData() {
    this.setData({
      refreshCount: this.data.refreshCount + 1
    });
    console.log('数据已刷新', this.data.refreshCount);
  }
})

​适用场景

• 适用于 仅 tabBar 切换时刷新，而其他情况（如返回页面）不刷新。

---

​方法 4：使用全局事件监听（适用于跨页面刷新）​

如果需要在 ​某个 tabBar 切换时刷新其他页面 ，可以使用 wx.onAppRoute 监听路由变化：

​示例代码

// app.js
App({
  onLaunch() {
    wx.onAppRoute((res) => {
      if (res.path === 'pages/tabPage1/index' && res.openType === 'switchTab') {
        console.log('切换到 tabPage1，可以触发全局事件');
        // 可以在这里触发自定义事件，让其他页面刷新
      }
    });
  }
});

​适用场景

• 适用于 跨页面通信 ，比如某个 tabBar 切换时，其他页面也要刷新。

---

​总结

方法	适用场景	备注
onTabItemTap	当前 tabBar 被点击时刷新	仅当前页面有效
onShow	每次页面显示时刷新	包括 tabBar 切换、返回页面
onHide + onShow	仅 tabBar 切换时刷新	避免其他情况触发
wx.onAppRoute	全局监听 tabBar 切换	适用于跨页面通信