uniapp怎么取消底部导航

1. 了解uniapp底部导航

在前端开发中，为了提供更好的用户体验，很多应用都会使用底部导航栏来方便用户操作。在uniapp中也有底部导航栏组件vue-tabbar提供，可以快速构建底部导航栏。

//示例代码
<template>
  <view class="tabbar">
    <view
      v-for="(item, index) in list"
      :key="index"
      @click="active = index"
      class="tabbar-item"
      :class="{'active': index === active}">
      <img :src="index === active ? item.selectedIconPath : item.iconPath" alt="">
      <p class="text">{{ item.text }}</p>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            iconPath: '/static/icon/home.png',
            selectedIconPath: '/static/icon/home_active.png',
            text: '首页'
          },
          {
            iconPath: '/static/icon/user.png',
            selectedIconPath: '/static/icon/user_active.png',
            text: '个人中心'
          }
        ],
        active: 0
      }
    }
  }
</script>
<style>
.tabbar {
  display: flex;
  justify-content: space-around;
  height: 60rpx;
  border-top: 1rpx solid #ebebeb;
  background: #fff;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tabbar-item img {
  height: 28rpx;
  width: 28rpx;
  margin-bottom: 2rpx;
}
.tabbar-item .text {
  font-size: 22rpx;
  color: #999;
}
.active .text {
  font-size: 24rpx;
  color: #007aff;
}
</style>

2. 取消底部导航

2.1 方案一：使用条件渲染

我们可以在特定情况下去掉底部导航，一种简单的方式是使用条件渲染，只需要在需要隐藏底部导航的页面上添加一个变量isShowTabbar，然后在底部导航组件中根据这个变量进行判断即可。

//示例代码
<template>
  <view>
    <view>我是内页，没有底部导航</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
          isShowTabbar: false
      }
    },
    onShow() {
      this.isShowTabbar = false;
    }
  }
</script>

在onShow生命周期函数中将isShowTabbar设置为false，就可以隐藏底部导航了。而底部导航组件中只需要根据这个变量进行判断即可。

//示例代码
<template>
  <view class="tabbar" v-if="isShowTabbar">
    <!--省略其余代码-->
  </view>
</template>
<script>
  export default {
    props: {
      isShowTabbar: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

2.2 方案二：使用路由导航守卫

而另一种比较有用的方式是使用路由导航守卫，这种方式可以在切换页面时动态地控制底部导航的显示和隐藏，而不是在页面内去掉。

在main.js文件中，我们可以使用uni-app提供的路由导航守卫beforeEach来进行处理。我们可以在beforeEach中根据当前路由地址，判断是否需要隐藏底部导航，并将结果存入全局变量中，然后在底部导航组件中根据这个变量进行判断即可。

//示例代码
// main.js
router.beforeEach((to, from, next) => {
  let isShowTabbar = true;
  //判断当前路由是否需要隐藏底部导航
  if (to.path === '/details') {
    isShowTabbar = false;
  }
  //将结果存入全局变量
  uni.$appOptions.globalData.isShowTabbar = isShowTabbar;
  next();
})
// Tabbar.vue
<template>
  <view class="tabbar" v-if="isShowTabbar">
    <!--省略其余代码-->
  </view>
</template>
<script>
  export default {
    computed: {
      isShowTabbar() {
        return uni.$appOptions.globalData.isShowTabbar;
      }
    }
  }
</script>

以上两种方式都可以实现隐藏底部导航，选择哪种方式可以视具体情况而定。

3. 总结

在uniapp中，底部导航是常用的组件之一，在某些特定情况下需要隐藏底部导航时，我们可以选择使用条件渲染或者路由导航守卫来实现。无论是哪种方式，都可以很容易地实现我们的需求。

注意：在使用路由导航守卫时，需要在main.js中引入router并进行初始化，详细使用方法可以参考uniapp文档。同时需要注意，如果路由打开方式为"redirectTo"或"reLaunch"，导航守卫可能会失效，这时需要使用监听onLoad或onShow生命周期函数的方式实现底部导航的隐藏。