当前位置：首页 > VUE

vue实现滑动切换

2026-03-08 14:20:27VUE

vue实现滑动切换的方法

使用vue-touch或hammer.js库

安装vue-touch或hammer.js库来处理触摸事件。vue-touch是专为Vue设计的触摸手势库，hammer.js是更通用的手势库。通过监听swipeleft和swiperight事件来实现滑动切换效果。

npm install vue-touch@next --save

在main.js中引入并注册：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

在组件模板中使用：

<v-touch @swipeleft="next" @swiperight="prev">
  <div>滑动切换内容</div>
</v-touch>

使用CSS过渡和Vue的transition组件

通过Vue的transition组件结合CSS过渡效果实现平滑的滑动动画。定义enter-active和leave-active类来控制元素进入和离开时的动画。

vue实现滑动切换

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

在Vue组件中使用：

<transition name="slide" mode="out-in">
  <div :key="currentIndex">当前内容</div>
</transition>

监听原生touch事件

直接监听touchstart、touchmove和touchend事件来计算滑动距离和方向。通过比较touchstart和touchend的坐标差来判断滑动方向。

vue实现滑动切换

methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX
  },
  handleTouchEnd(e) {
    this.endX = e.changedTouches[0].clientX
    if(this.endX - this.startX > 50) {
      this.prev()
    } else if(this.startX - this.endX > 50) {
      this.next()
    }
  }
}

使用第三方组件库

Element UI、Vant等UI框架提供了现成的轮播组件，可直接使用其滑动切换功能。例如使用Vant的Swipe组件：

<van-swipe @change="onChange">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
</van-swipe>

结合Vue Router实现页面级滑动切换

在路由视图外包裹transition组件，为不同路由设置不同的过渡效果。需要为每个路由设置唯一的key。

<transition :name="transitionName">
  <router-view :key="$route.fullPath"></router-view>
</transition>

在路由守卫中根据路由变化方向设置不同的过渡名称：

watch: {
  '$route'(to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

标签: vue