站长资源网络编程
移动端滑动切换组件封装 vue-swiper-router实例详解
简介具体代码如下所述：组件部分
具体代码如下所述：
<strong>组件部分</strong>
<template>
<div class="main">
<div class="page-tab">
<div
:class="nowPath == item.path "
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实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！