我们在做移动端项目的时候，底部导航栏基本可以说是必备的功能，可以方便用户在几大基本页面间切换。一套完整的底部导航栏，不仅需要具有导航菜单的显示，还需要根据实际业务逻辑判断导航栏何时显示、何时隐藏，以及在组件之间进行切换时，添加恰当的页面过渡效果，从而实现整体效果的提升。
比如从Home组件跳转到Cart组件时，通过v-enter、v-leave-to、v-enter-active、v-leave-active等结合opacity属性，设置组件进入、离开时的透明度过渡效果。再进一步，在定义路由时，通过meta参数，设置每条路由的index参数，通过监听to、from路由对象的index，并比较to.meta.index与from.meta.index，前者大页面过渡效果为页面向左滑动，若后者大则过渡效果为页面向右滑动，在App.vue中设置好之后，也就为后面的组件提供了非常好的过渡效果。
这些内容都会在文章中给出代码解决方案。
效果截图：
主要内容 (Vant版本：2.9.0)：
1、将底部导航栏单独封装，位于：src\components\FooterNav.vue:
2、将FooterNav组件引入App.vue，以实现全局引用。
3、设置过渡效果
1、FooterNav.vue文件
1.1 引入Tabbar：
import { Tabbar, TabbarItem } from ‘vant‘;
1.2 组件注册：
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem,
},
1.3 设置初始选中标签：
data() { return { active: ‘home‘ } },
1.4 在<template></template>中添加：
<van-tabbar v-model="active" > <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item> <van-tabbar-item name="category" icon="search">标签</van-tabbar-item> <van-tabbar-item name="shop-cart" icon="friends-o">标签</van-tabbar-item> <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item> </van-tabbar>
2、引入App.vue
2.1 引入：
import FooterNav from ‘./components/FooterNav.vue‘;
2.2 组件注册：
components: { "footer-nav": FooterNav, }
注： 组件的名称使用 kebab-case (短横线分隔命名) 命名，可以很好的避免和当前以及未来的 HTML 元素相冲突。
2.3 在<template></template>中添加：
<div id="app"> <!-- main 内容 --> <transition :name="mainName"> <keep-alive v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件 --> <router-view id="view" v-if="$route.meta.keepAlive" /> </keep-alive> <!-- 这里是不被缓存的视图组件 --> <router-view v-if="!$route.meta.keepAlive && isRouterAlive" id="view" /> </transition> <!-- 底部导航 --> <transition :name="navName"> <footer-nav v-if="isShowNav" :activeNavIndex="activeNavIndex"></footer-nav> </transition> </div>
2.4 设置data：
data() { return { mainName: ‘‘, // 内容区域动画名 navName: ‘‘, // 导航动画名 isShowNav: false, // 是否显示底部导航 Tab activeNavIndex: 0, // 底部导航激活下标 isRouterAlive: true, // 用于刷新页面用 navTabs: [‘Home‘, ‘Category‘, ‘Cart‘, ‘Me‘] // 底部导航 }; },
3.设置过滤效果
3.1 通过watch监听路由改变，设置transition名称：
watch: { $route (to, from) { const {navTabs} = this.$data; const toName = to.name; const fromName = from.name; //如果是在 navTab 页面内刷新浏览器或初始进入系统，则显示导航栏 if(navTabs.includes(toName) && !fromName) isShowNav = true; /* 判断footer-nav是否显示 * 根据meta.index判断页面向左滑动 or 向右滑动 */ // 判断是否是底部导航之间相互切换 if(navTabs.includes(toName) && navTabs.includes(fromName)) { this.mainName = ‘fade‘; this.isShowNav = true; // 如果 to 索引大于 from 索引, 判断为前进状态, 反之则为后退状态 } else if (to.meta.index > from.meta.index) { this.mainName = ‘slide-left‘; this.navName = ‘nav-slide‘; this.isShowNav = false; } else if (to.meta.index < from.meta.index) { this.mainName = ‘slide-right‘; this.navName = ‘nav-slide‘; (navTabs.includes(toName))&&(this.isShowNav = true); } } }
3.2 添加过渡效果：
//底部导航点进其他页面 导航 tab 动画 .nav-slide-enter, .nav-slide-leave-to { transform: translate3d(-100%,0,0) } .nav-slide-enter-active, .nav-slide-leave-active { transition: all 5.5s }
// 底部导航之间相互切换 内容区域动画 .fade-enter { opacity: 0; } .fade-leave { opacity: 1; } .fade-enter-active { transition: opacity .5s; } .fade-leave-active { opacity: 0; transition: opacity 0s; } //底部导航栏消失时一般为立马消失
// 前进：右边页面进入的同时，同时左边页面在消失 .slide-left-enter { //开始过渡的开始状态为沿X轴向右平移100%，开始过渡结束时向左平移到原位 transform: translate3d(100%, 0, 0); } .slide-left-leave-active { transform: translate3d(-100%, 0, 0); } .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all .5s; position: absolute; // 解决：页面切换时空白闪屏的问题 }
// 后退：左边页面进入的同时，同时右边页面在消失 .slide-right-enter { transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { transform: translate3d(100%, 0, 0); } .slide-left-enter-active, .slide-left-leave-active { will-change: transform; transition: all .5s; position: absolute; // 解决：页面切换时空白闪屏的问题 }
这样，在App.vue全局注册了之后，后面的路由就可以自动应用这些过渡效果了。
好了，今天的文章就介绍到这里，如果有不正确的地方，欢迎大家留言指正。
原文：https://www.cnblogs.com/Fcode-/p/13255353.html