移动端滑动切换组件封装 vue-swiper-router实例详解
程序员文章站
2022-11-09 17:14:14
具体代码如下所述：
组件部分
具体代码如下所述：
<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实例详解，希望对大家有所帮助
上一篇： 最常见的老年人疾病有哪些?