移动端滑动切换组件封装 vue-swiper-router

组件部分

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

router部分

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
    }
  ]
});

调用组件部分

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

完整代码 --> 代码地址    移动端滑动切换