首页
写过的文章
Search
1
mock的基本用法
718 阅读
2
js的数组常用方法
691 阅读
3
cnpm安装教程
563 阅读
4
能有效解决问题的提问方法2.0
552 阅读
5
Vue、git指令
490 阅读
默认分类
JavaScript
Vue
TypeScript
登录
Search
标签搜索
底部导航
tabbar
底部导航栏
vue3隐藏底部导航栏
vue3隐藏tabbar
网页
黑白
网页黑白
cnpm安装
cnpm
Z的故事
累计撰写
23
篇文章
累计收到
48
条评论
首页
栏目
默认分类
JavaScript
Vue
TypeScript
页面
写过的文章
搜索到
1
篇与
tabbar
的结果
2023-01-30
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> 可能底部导航栏写的不一样,效果会有偏差, 这一块是自己封装的导航栏。
2023年01月30日
420 阅读
0 评论
0 点赞