uniapp 控制底部tabbar每一项的显示隐藏

在 UniApp 中，可以通过控制 page 页面的 `customTabBar` 属性来实现底部 TabBar 每一项的显示和隐藏。

首先，在 `App.vue` 中定义底部 TabBar：

<template>
  <div>
    <tab-bar :list="tabBarList" :current="currentTab" @change="tabChange"></tab-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import tabBar from '@/components/tab-bar.vue'

export default {
  components: {
    tabBar
  },
  data() {
    return {
      tabBarList: [
        {pagePath: '/pages/home/index', text: '首页', icon: 'home'},
        {pagePath: '/pages/category/index', text: '分类', icon: 'category'},
        {pagePath: '/pages/cart/index', text: '购物车', icon: 'cart'},
        {pagePath: '/pages/mine/index', text: '我的', icon: 'mine'}
      ],
      currentTab: 0
    }
  },
  methods: {
    tabChange(e) {
      this.currentTab = e.index
    }
  }
}
</script>

然后，在需要控制 TabBar 显示隐藏的页面中，使用 `onShow` 和 `onHide` 生命周期钩子函数来动态修改 `customTabBar` 的值：

<script>
export default {
  onShow() {
    this.$parent.$refs.tabBar.customTabBar = true // 显示 TabBar
  },
  onHide() {
    this.$parent.$refs.tabBar.customTabBar = false // 隐藏 TabBar
  }
}
</script>

这样，当页面显示时，TabBar 就会显示；当页面隐藏时，TabBar 就会隐藏。你可以根据实际需求修改相应的逻辑。