移动端滑动切换组件封装 vue-swiper-router实例详解

<strong>组件部分</strong>
<template>
  <div class=\"main\">
    <div class=\"page-tab\">
      <div 
        :class=\"nowPath == item.path ? \'tab-item tab-item_active\' : \'tab-item\'\"
        v-for=\'(item, index) in tabList\'
        :key=\"index\">
        <router-  
          mode=\"out-in\"
          :to=\"item.path\">{{item.name}}
        </router- >
      </div>    
    </div>
    <transition :name=\"slideDirection\">
      <slot>
      </slot> 
    </transition>
  </div>
</template>
< >
export default {
  props: {
    tabList: Array
  },
  mounted() {
    this.nowPath = this.$route.path;
    this.initTouchedEvent();
  },
  data() {
    return {
      tabSwiper: {},
      slideDirection: \'slideforward\',
      nowPath: \'\',
      startX: \'\',
      startY:\'\'
    };
  },
  methods: {
    touchedstartHandler(e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
    },
    touchendHandler(e) {
      let direction = this.startX - e.changedTouches[0].pageX;
      let directionY = this.startY - e.changedTouches[0].pageY;
      let nowRouteIndex = 0;
      this.tabList.forEach((v, index) => {
        if (v.path == this.nowPath) {
          nowRouteIndex = index;
        }
      });
      var disXY = Math.abs(direction)>Math.abs(directionY);
      if (disXY&&direction >= 0 && nowRouteIndex < this.tabList.length - 1) {
        //设置向前动画
        this.slideDirection = \'slideforward\';
        this.$router.push({\'path\': this.tabList[nowRouteIndex + 1].path});
      } 
      if (disXY&&direction < 0 && nowRouteIndex > 0) {
        //设置向后动画
        this.slideDirection = \'slideback\';
        this.$router.push({\'path\': this.tabList[nowRouteIndex - 1].path});
      }
    },
    initTouchedEvent() {
      this.$el.addEventListener(\'touchstart\', this.touchedstartHandler.bind(this));
      this.$el.addEventListener(\'touchend\', this.touchendHandler.bind(this));
    },
  },
  watch: {
    \'$route\' (to, from) {
      this.nowPath = to.path;
    }
  }
};
</ >
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100%;
    width: 100%;
    background-color: #fbf9fe;
  }
  a {
    color: #333;
    text-decoration: none;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-tab {
    display: flex;
    justify-content: center;
  }
  .tab-item {
    text-align: center;
    align-items: center;
    height: 44px;
    line-height: 44px;
    flex: 1;
    height: 100%;
    background-color: #fff;
  }
  .tab-item_active {
    border-bottom: 3px solid #f90;
  }
  .tab-item_active a {
    color: #f90;
  }
  .slideforward-enter-active, .slideforward-leave-active {
    position: absolute;
    transition: all .5s;
    transform: translate3d(0px, 0px, 0px);
  }
  .slideforward-enter, .slideforward-leave-to {
    position: absolute;
    transform: translate3d(200px, 0px, 0px);
  }
  .slideback-enter-active, .slideback-leave-active {
    position: absolute;
    transition: all .5s;
    transform: translate3d(0px, 0px, 0px);
  }
  .slideback-enter, .slideback-leave-to {
    position: absolute;
    transform: translate3d(-200px, 0px, 0px);
  }
</style>
<strong>router部分</strong>
import Vue from \'vue\';
import Router from \'vue-router\';
import Page1 from \'@/pages/page1/index\';
import Page2 from \'@/pages/page2/index\';
import Page3 from \'@/pages/page3/index\';
import Page4 from \'@/pages/page4/index\';
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: \'/\',
   name: \'index\',
   component: Page1
  },
  {
   path: \'/page2\',
   name: \'Page2\',
   component: Page2
  },
  {
   path: \'/page3\',
   name: \'Page3\',
   component: Page3
  },
  {
   path: \'/page4\',
   name: \'Page4\',
   component: Page4
  }
 ]
});
<strong>调用组件部分</strong>
<template>
 <div id=\"app\">
   <TabPages 
         :tab-list=\'tabList\'>
     <router-view/>
   </TabPages>
 </div>
</template>
< >
import TabPages from \'./components/index\';
export default {
 name: \'app\',
 data() {
   return {
    tabList: [{
      name: \'tab1\',
      path: \'/\'
    }, {
      name: \'tab2\',
      path: \'/page2\'
    }, {
      name: \'tab3\',
      path: \'/page3\'
    }, {
      name: \'tab4\',
      path: \'/page4\'
    }]
   }
 },
 components: {
   TabPages
 }
}
</ >
<style>
</style>