当前位置：首页 > VUE

vue实现块左右滑动

2026-02-22 18:59:31VUE

实现块左右滑动的方案

在Vue中实现块左右滑动可以通过多种方式完成，以下是几种常见的方法：

使用CSS和Vue指令

通过CSS的transform和transition属性结合Vue的指令实现滑动效果。

<template>
  <div class="slider-container">
    <div 
      class="slider" 
      :style="{ transform: `translateX(${offset}px)` }"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      <div class="slide" v-for="(item, index) in slides" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      offset: 0,
      startX: 0,
      currentX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
    },
    handleTouchMove(e) {
      this.currentX = e.touches[0].clientX
      this.offset = this.currentX - this.startX
    },
    handleTouchEnd() {
      // 添加滑动结束后的逻辑，如自动对齐到最近的slide
    }
  }
}
</script>

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

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

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

使用第三方库

使用现成的轮播库如swiper可以快速实现滑动效果。

<template>
  <swiper>
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      {{ slide }}
    </swiper-slide>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper-bundle.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    }
  }
}
</script>

使用Vue动画

通过Vue的<transition-group>实现滑动动画效果。

vue实现块左右滑动

<template>
  <div class="slider-container">
    <transition-group name="slide" tag="div" class="slider">
      <div class="slide" v-for="(item, index) in slides" :key="index">
        {{ item }}
      </div>
    </transition-group>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      currentIndex: 0
    }
  },
  methods: {
    prev() {
      this.currentIndex = Math.max(0, this.currentIndex - 1)
    },
    next() {
      this.currentIndex = Math.min(this.slides.length - 1, this.currentIndex + 1)
    }
  }
}
</script>

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

.slider {
  display: flex;
}

.slide {
  flex: 0 0 100%;
}

.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>