uniapp跳转tabbar空白如何办

前言

在移动应用开发中，tabbar是常见的一种导航形式，但在uniapp中，有时会出现跳转tabbar后空白的情况，这是因为uniapp采用了单页应用的方式，跳转tabbar后页面并没有刷新，需要再次触发路由才能加载新的页面内容。本文将介绍uniapp跳转tabbar空白的解决方法。

第一段：采用页面刷新的方法

当跳转到tabbar页面后，可以将页面的onShow生命周期函数中加入判断当前选中的tabbar页面，如果是当前页面，则手动刷新页面。代码如下：

      onShow() {
        let pages=getCurrentPages();
        let currentPage=pages[pages.length - 1];
        if (currentPage.route==='pages/tabbar/index/index') {
          uni.$emit('refreshIndexPage');
        }
      }
    

在tabbar对应的页面中，可以监听refreshIndexPage事件，并刷新页面内容。

      onShow() {
        uni.$on('refreshIndexPage', ()=> {
          // 刷新页面内容
        })
      }
    

第二段：使用VUEX进行状态管理

通过VUEX进行状态管理，可以让所有页面共用同一份数据，在跳转tabbar后也能保存状态并加载新的页面内容。可以在tabbar的点击事件中提交一个mutations，修改对应的状态，然后在具体页面中进行状态的获取和展示。

      // tabbar点击事件
      switchTab(item) {
        this.$store.commit('changeTabbarIndex', item.index);
      }
      
      // VUEX中的mutations
      mutations: {
        changeTabbarIndex(state, index) {
          state.tabbarIndex=index;
        }
      }
      
      // 具体页面中的状态获取和展示
      computed: {
        tabbarIndex() {
          return this.$store.state.tabbarIndex;
        }
      }
      // 在页面切换时，根据tabbarIndex进行数据的重新获取和展示
    

第三段：使用uni.navigateBack方法

使用uni.navigateBack方法可以让页面返回到指定层数的页面，在跳转tabbar后，可以返回到上一个页面，然后再重新进入tabbar页面，此时就能够加载新的页面内容。

       // tabbar点击事件
      switchTab(item) {
        uni.navigateBack({
          delta: 1,
          success: ()=> {
            uni.switchTab({
              url: item.url
            });
          }
        });
      }
    

第四段：结语

以上是uniapp跳转tabbar空白的解决方法，根据具体的需求和情况，可以选择不同的解决方案。在工作中，要善于从官方文档和社区中获取帮助和解决问题，不断提高自己的实战能力。