vue+mintUI實現移動端tabbar左右滑動切換

思路

使用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>

完整代碼

傳送門