当前位置：首页 > VUE

vue实现滑动翻页

2026-01-15 05:35:49VUE

Vue 实现滑动翻页的方法

使用 touch 事件监听

在 Vue 组件中监听 touchstart、touchmove 和 touchend 事件，通过计算滑动距离判断翻页方向。

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      endX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.endX = e.touches[0].clientX
    },
    handleTouchEnd() {
      const diffX = this.endX - this.startX
      if (Math.abs(diffX) > 50) { // 滑动阈值
        if (diffX > 0) {
          this.$emit('swipe-left') // 向左滑动
        } else {
          this.$emit('swipe-right') // 向右滑动
        }
      }
    }
  }
}
</script>

使用第三方库

安装 vue-touch 或 hammer.js 等手势库可以简化实现：

npm install hammerjs

<template>
  <div ref="swipeContainer">
    <!-- 页面内容 -->
  </div>
</template>

<script>
import Hammer from 'hammerjs'

export default {
  mounted() {
    const hammer = new Hammer(this.$refs.swipeContainer)
    hammer.on('swipeleft', () => {
      this.$emit('swipe-left')
    })
    hammer.on('swiperight', () => {
      this.$emit('swipe-right')
    })
  }
}
</script>

结合 CSS 过渡效果

为翻页添加平滑的过渡效果：

.page {
  transition: transform 0.3s ease;
}
.page-enter {
  transform: translateX(100%);
}
.page-leave-to {
  transform: translateX(-100%);
}

完整示例

结合 Vue 的过渡组件和滑动事件：

<template>
  <transition :name="transitionName">
    <div 
      class="page"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <!-- 当前页内容 -->
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      transitionName: ''
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchEnd(e) {
      const endX = e.changedTouches[0].clientX
      const diffX = endX - this.startX

      if (Math.abs(diffX) > 50) {
        this.transitionName = diffX > 0 ? 'slide-right' : 'slide-left'
        this.$emit('swipe', diffX > 0 ? 'left' : 'right')
      }
    }
  }
}
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s;
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>