vue+mintUI实现移动端tabbar左右滑动切换
思路使用transition组件实现切换动画,使用watch监听route来实现切换的方向。效果实现方法<template><div class="layout-container"><div class="header-layout"><my-header :title="headerTitle"></my-header></di
·
思路
使用transition组件实现切换动画,使用watch监听route来实现切换的方向。
效果
实现方法
<template>
<div class="layout-container">
<div class="header-layout">
<my-header :title="headerTitle"></my-header>
</div>
<div class="main-layout">
<transition :name="transitionName">
<keep-alive>
<router-view/>
</keep-alive>
</transition>
</div>
<div class="tabbar-layout">
<tabbar :tabbarMenu="menus" v-model="currentPath" @input="tabbarChange"></tabbar>
</div>
</div>
</template>
<script>
import { tabbarMenus, routes } from "@/myModules/menu.js";
import tabbar from "@/components/tabbar/index.vue";
import myHeader from "@/components/my-header/index.vue";
export default {
name: 'layout',
components: {
tabbar,
myHeader
},
data(){
return {
transitionName: "slide-right",
menus: tabbarMenus,
currentPath: tabbarMenus[0].path,
headerTitle: tabbarMenus[0].name,
}
},
watch: {
'$route.path'(newPath,oldPath){
let newIndex = 0,oldIndex = 0;
const callbackFun = (menuItem,index) => {
for(let i=0,len=menuItem.length;i<len;i++){
let item = menuItem[i];
if(item.path==newPath) newIndex = index;
if(item.path==oldPath) oldIndex = index;
if(item.children && item.children.length>0){
callbackFun(item.children,index++);
}
}
}
callbackFun(routes,0);
if(newIndex==oldIndex){ // 同级页面
if(newIndex==0){ // tabbar切换
let tabbarList = tabbarMenus.map(item => {
return item.path;
});
let newI = tabbarList.indexOf(newPath),oldI = tabbarList.indexOf(oldPath);
if(newI>oldI){ // 向左滑
this.transitionName = "slide-right";
}else{
this.transitionName = "slide-left";
}
}else{
this.transitionName = "slide-left";
}
}else if(newIndex<oldIndex){ // 返回父页面
this.transitionName = "slide-right";
}else if(newIndex>oldIndex){ // 进入子页面
this.transitionName = "slide-left";
}
}
},
methods: {
tabbarChange(item){
if(this.$route.path==item) return false;
this.headerTitle = tabbarMenus.filter(value => { return value.path===item; })[0].name;
this.$router.push(item);
}
}
}
</script>
<style lang="less" scoped>
.layout-container{
width: 100%;
height: 100%;
.main-layout{
position: absolute;
width: 100%;
height: calc(100% - 91px);
overflow: hidden;
.slide-left-enter{
transform: translateX(-100%);
}
.slide-right-enter{
transform: translateX(100%);
}
.slide-left-leave-to{
transform: translateX(100%);
position: absolute;
}
.slide-right-leave-to{
transform: translateX(-100%);
position: absolute;
}
.slide-left-enter-active,.slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active{
transition: 0.5s;
}
}
}
</style>
完整代码
更多推荐
已为社区贡献8条内容
所有评论(0)