当前位置：首页 > VUE

vue实现滑动div

2026-02-17 18:18:26VUE

Vue 实现滑动 Div 的方法

使用 CSS 和 Vue 事件绑定

通过 Vue 的 @touchstart、@touchmove 和 @touchend 事件，结合 CSS 的 transform 属性，可以实现滑动效果。这种方法适用于移动端和桌面端。

<template>
  <div 
    class="slider" 
    @touchstart="handleTouchStart" 
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >
    <!-- 滑动内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0,
      isDragging: false
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
      this.isDragging = true;
    },
    handleTouchMove(e) {
      if (!this.isDragging) return;
      const currentX = e.touches[0].clientX;
      this.offsetX = currentX - this.startX;
    },
    handleTouchEnd() {
      this.isDragging = false;
      // 可选：添加滑动结束后的动画或复位逻辑
    }
  }
};
</script>

<style>
.slider {
  transition: transform 0.3s ease;
  width: 100%;
  height: 200px;
  background: #f0f0f0;
}
</style>

使用第三方库（如 vue-draggable）

如果需要更复杂的拖拽功能，可以使用 vue-draggable 库。该库基于 Sortable.js，支持触摸和鼠标事件。

安装：

npm install vuedraggable

示例代码：

<template>
  <draggable v-model="items" @start="onStart" @end="onEnd">
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  methods: {
    onStart() {
      console.log('拖拽开始');
    },
    onEnd() {
      console.log('拖拽结束');
    }
  }
};
</script>

使用 CSS Scroll Snap

如果目标是实现横向或纵向滚动效果，可以使用 CSS 的 scroll-snap 属性。这种方法无需 JavaScript，适合简单的滑动展示。

vue实现滑动div

<template>
  <div class="scroll-container">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
  </div>
</template>

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 200px;
}
.scroll-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: #f0f0f0;
  margin-right: 10px;
}
</style>