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

最新推荐文章于 2025-05-27 11:51:45 发布

weixin_39727005

最新推荐文章于 2025-05-27 11:51:45 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

文章标签： vue移动端滑动切换页面

本文链接：https://blog.csdn.net/weixin_39727005/article/details/111515237

本文详细介绍了如何封装一个移动端滑动切换组件vue-swiper-router，通过监听触摸事件实现页面平滑过渡，适用于多个页面间的滑动切换。文中包括组件代码、路由配置以及组件调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

具体代码如下所述：

组件部分

:class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'"

v-for='(item, index) in tabList'

:key="index">

mode="out-in"

:to="item.path">{{item.name}}

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;

}

};

* {

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

}

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: '/',

component: Page1

{

path: '/page2',

component: Page2

{

path: '/page3',

component: Page3

{

path: '/page4',

component: Page4

}

]

});

调用组件部分

:tab-list='tabList'>

import TabPages from './components/index';

export default {

data() {

return {

tabList: [{

path: '/'

}, {

path: '/page2'

}, {

path: '/page3'

}, {

path: '/page4'

}]

}

components: {

TabPages

}

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

总结

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

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。