vue 左右滑动实现

Vue 实现左右滑动功能

使用 Vue 实现左右滑动功能可以通过多种方式完成，常见的有基于原生 JavaScript 事件监听、第三方库（如 Hammer.js）或 Vue 专用插件（如 vue-touch）。以下是几种实现方法：

使用 touch 事件监听

通过监听 touchstart、touchmove 和 touchend 事件，计算滑动距离和方向。

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="slider"
  >
    <!-- 滑动内容 -->
  </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 diff = this.endX - this.startX;
      if (Math.abs(diff) > 50) { // 滑动距离阈值
        if (diff > 0) {
          console.log('向右滑动');
        } else {
          console.log('向左滑动');
        }
      }
    }
  }
};
</script>

使用 Hammer.js 库

Hammer.js 是一个专门处理手势的库，支持滑动、缩放等多种手势。

<template>
  <div ref="slider" class="slider">
    <!-- 滑动内容 -->
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const slider = this.$refs.slider;
    const hammer = new Hammer(slider);
    hammer.on('swipeleft', () => {
      console.log('向左滑动');
    });
    hammer.on('swiperight', () => {
      console.log('向右滑动');
    });
  }
};
</script>

使用 vue-touch 插件

vue-touch 是 Vue 的官方推荐插件，封装了 Hammer.js 的功能。

安装插件：

npm install vue-touch@next

使用示例：

<template>
  <v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight">
    <div class="slider">
      <!-- 滑动内容 -->
    </div>
  </v-touch>
</template>

<script>
import VueTouch from 'vue-touch';

export default {
  methods: {
    onSwipeLeft() {
      console.log('向左滑动');
    },
    onSwipeRight() {
      console.log('向右滑动');
    }
  }
};
</script>

结合 CSS 过渡效果

如果需要滑动时带动画效果，可以结合 CSS 过渡或 Vue 的 <transition> 组件。

.slider {
  transition: transform 0.3s ease;
}
.slide-left {
  transform: translateX(-100%);
}
.slide-right {
  transform: translateX(100%);
}

在 Vue 中动态切换类名：

<template>
  <div :class="{'slide-left': isLeft, 'slide-right': isRight}">
    <!-- 滑动内容 -->
  </div>
</template>

注意事项

• 滑动距离阈值可以根据实际需求调整。
• 在移动端开发时，注意阻止默认事件（如 e.preventDefault()）以避免页面滚动冲突。
• 如果使用第三方库，确保引入正确的依赖并检查兼容性。