移动端滑动切换组件封装 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-link           mode="out-in"          :to="item.path">{{item.name}}        </router-link>      </div>        </div>    <transition :name="slideDirection">      <slot>      </slot>     </transition>  </div></template><script>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;    }  }};</script><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><script>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 }}</script><style></style>