uniapp底部导航栏切换刷新页面

在uni-app中，底部导航栏切换时刷新页面可以通过以下几种方式实现：

1. 使用`onTabItemTap`事件监听导航栏切换。在App.vue文件中，可以通过监听`onTabItemTap`事件来处理导航栏切换的操作，然后在对应的页面中执行刷新页面的操作。

// App.vue
<template>
  <div>
    <tab-bar></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    // 监听底部导航栏切换
    onTabItemTap(item) {
      // item.index 表示点击的是第几个导航栏
      // 根据自己的需求执行相应的操作
      if (item.index === 0) {
        // 执行页面刷新的操作
        this.$refs.home.refresh();
      } else if (item.index === 1) {
        // 执行页面刷新的操作
        this.$refs.news.refresh();
      } else if (item.index === 2) {
        // 执行页面刷新的操作
        this.$refs.profile.refresh();
      }
    }
  }
}
</script>

2. 使用页面的生命周期钩子函数。在对应的页面中，可以使用`onShow`生命周期钩子函数来处理页面切换时的刷新操作。

// Home.vue
<script>
export default {
  onShow() {
    // 执行页面刷新的操作
    this.refresh();
  },
  methods: {
    refresh() {
      // 页面刷新的逻辑
      console.log('Home页面刷新');
    }
  }
}
</script>

3. 使用`uni.$on`和`uni.$emit`进行事件通信。在对应的页面中，可以使用`uni.$on`监听自定义事件，在底部导航栏切换时使用`uni.$emit`触发自定义事件，从而执行页面刷新的操作。

// Home.vue
<script>
export default {
  mounted() {
    // 监听自定义事件
    uni.$on('refreshHome', () => {
      // 执行页面刷新的操作
      this.refresh();
    });
  },
  methods: {
    refresh() {
      // 页面刷新的逻辑
      console.log('Home页面刷新');
    }
  }
}
</script>

// App.vue
<script>
export default {
  methods: {
    // 监听底部导航栏切换
    onTabItemTap(item) {
      if (item.index === 0) {
        // 触发自定义事件，通知Home页面刷新
        uni.$emit('refreshHome');
      } else if (item.index === 1) {
        // 触发自定义事件，通知News页面刷新
        uni.$emit('refreshNews');
      } else if (item.index === 2) {
        // 触发自定义事件，通知Profile页面刷新
        uni.$emit('refreshProfile');
      }
    }
  }
}
</script>

这些方法都可以实现底部导航栏切换时刷新页面的效果，选择适合自己项目的方式进行实现即可。