vue实现手机左右滑

实现手机左右滑动的 Vue 方案

使用 vue-touch 库

安装 vue-touch 库，该库基于 Hammer.js 提供了手势支持：

npm install vue-touch@next hammerjs

在 Vue 项目中注册插件并配置滑动事件：

import Vue from 'vue';
import VueTouch from 'vue-touch';
import Hammer from 'hammerjs';

Vue.use(VueTouch, { name: 'v-touch', hammer: Hammer });

// 组件中使用
<template>
  <v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight">
    <div>滑动区域内容</div>
  </v-touch>
</template>

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

原生 Touch 事件实现

通过监听 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() {
      if (this.startX - this.endX > 50) {
        console.log('向左滑动');
      } else if (this.endX - this.startX > 50) {
        console.log('向右滑动');
      }
    }
  }
};
</script>

结合 CSS 过渡效果

为滑动添加动画效果，提升用户体验：

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

在 Vue 中动态切换类名：

<template>
  <div 
    :class="['slide-container', directionClass]"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
  >
    内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      directionClass: '',
      startX: 0
    };
  },
  methods: {
    handleTouchEnd() {
      if (this.startX - this.endX > 50) {
        this.directionClass = 'slide-left';
      } else if (this.endX - this.startX > 50) {
        this.directionClass = 'slide-right';
      }
      setTimeout(() => this.directionClass = '', 300);
    }
  }
};
</script>

注意事项

• 移动端开发需添加视口 meta 标签确保正确缩放：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 滑动阈值（如 50px）可根据实际需求调整
• 在 touchmove 事件中调用 e.preventDefault() 可防止页面滚动与滑动冲突
• 对于复杂场景（如轮播图），推荐使用现成库如 swiper.js