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

具体代码如下所述：<strong>组件部分</strong><template><divclass="main"><divclass=

具体代码如下所述：

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

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

 总结

以上所述是小编给大家介绍的移动端滑动切换组件封装 vue-swiper-router实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！