当前位置：首页 > VUE

vue实现左右滑动代码

2026-01-21 20:39:05VUE

vue实现左右滑动代码

以下是一个基于 Vue 3 实现左右滑动功能的代码示例，结合手势识别和动画效果：

基础实现（使用 CSS 和事件监听）

<template>
  <div class="slider-container" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag">
    <div class="slider" :style="{ transform: `translateX(${offsetX}px)` }">
      <div v-for="item in items" :key="item.id" class="slide">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = [
  { id: 1, content: 'Slide 1' },
  { id: 2, content: 'Slide 2' },
  { id: 3, content: 'Slide 3' }
];

const offsetX = ref(0);
let startX = 0;
let isDragging = false;

const startDrag = (e) => {
  startX = e.touches[0].clientX;
  isDragging = true;
};

const onDrag = (e) => {
  if (!isDragging) return;
  const currentX = e.touches[0].clientX;
  offsetX.value = currentX - startX;
};

const endDrag = () => {
  isDragging = false;
  // 添加滑动结束后的逻辑（如自动对齐到最近幻灯片）
  offsetX.value = 0; // 示例：简单复位
};
</script>

<style>
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider {
  display: flex;
  transition: transform 0.3s ease;
}

.slide {
  flex: 0 0 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border: 1px solid #ddd;
}
</style>

增强版（使用第三方库）

安装 Hammer.js 实现更专业的手势识别：

npm install hammerjs

<template>
  <div ref="slider" class="slider-container">
    <div class="slider" :style="{ transform: `translateX(${currentIndex * -100}%)` }">
      <div v-for="item in items" :key="item.id" class="slide">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Hammer from 'hammerjs';

const items = [
  { id: 1, content: 'Slide 1' },
  { id: 2, content: 'Slide 2' },
  { id: 3, content: 'Slide 3' }
];

const currentIndex = ref(0);
const slider = ref(null);

onMounted(() => {
  const mc = new Hammer(slider.value);
  mc.on('swipeleft', () => {
    if (currentIndex.value < items.length - 1) {
      currentIndex.value++;
    }
  });
  mc.on('swiperight', () => {
    if (currentIndex.value > 0) {
      currentIndex.value--;
    }
  });
});
</script>

<style>
.slider-container {
  width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-out;
}

.slide {
  flex: 0 0 100%;
  min-height: 300px;
}
</style>

带指示器的完整组件

<template>
  <div class="carousel">
    <div class="slides" :style="{ transform: `translateX(${-currentIndex * 100}%)` }">
      <div v-for="(slide, index) in slides" :key="index" class="slide">
        <img :src="slide.image" alt="">
      </div>
    </div>
    <div class="indicators">
      <span 
        v-for="(_, index) in slides" 
        :key="index" 
        :class="{ active: currentIndex === index }"
        @click="goToSlide(index)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const slides = [
  { image: 'https://via.placeholder.com/800x400?text=Slide+1' },
  { image: 'https://via.placeholder.com/800x400?text=Slide+2' },
  { image: 'https://via.placeholder.com/800x400?text=Slide+3' }
];

const currentIndex = ref(0);

const goToSlide = (index) => {
  currentIndex.value = index;
};

// 自动轮播
onMounted(() => {
  setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % slides.length;
  }, 3000);
});
</script>

<style>
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 100%;
}

.slide img {
  width: 100%;
  display: block;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.indicators span {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.indicators span.active {
  background: white;
}
</style>