vue3隐藏底部导航栏

关于vue3移动端底部TabBar隐藏方案

方法一
利用路由元信息meta设置一个开关按钮，控制底部导航的显示隐藏

// router -> index.js
{ 
    path: '/home',
    component: () => import('@/views/home/home.vue')
},{
    path: '/show',
    component: () => import('@/views/show/show.vue'),
    meta: {
         hideTabBar: true
    }
}

在路由中添加meta，给一个布尔值控制导航栏显示隐藏

// APP.vue
 <template>
   <div class="app">
     <router-view />
     <tab-bar v-if="!route.meta.hideTabBar"/>
     <!-- 因为其他页面没有设置所以最终得到的结果是undefined 他的取反结果是true，为true这个tabbar就会显示 -->
   </div>
 </template>
 <script setup>
   import TabBar from "@/components/tabbar/tabbar.vue"
   import { useRoute } from "vue-router";
   const route = useRoute()
   <!-- 在script进行route.meta.hideTabBar 在写到template中数据会不响应 -->
 </script>
 <style scoped></style>

方法二
通过css样式覆盖底部导航栏

// 页面
<template>
   <div class="root">XXX</div>
</ template>
<style scoped lang="scss">
  // 这一块代码可以封装到通用css样式文件中，随用随拿
  .root {
    height： 100vh;
    // 因为我写的底部导航栏用了固定定位，所以要用相对定位，因为相对定位可以设置z-index
    position: relative;
    z-index: 9;
    background-color: #FFFFFF;
    //数据过多滚动以后还是会显示出底部导航，这一步是做到只在100vh内容区域进行滚动
    overflow-y: auto; 
  }
</style>

可能底部导航栏写的不一样，效果会有偏差，这一块是自己封装的导航栏。

vue3隐藏底部导航栏

评论 (0)