vue实现左右滑动代码

Vue实现左右滑动功能

使用Vue实现左右滑动功能可以通过多种方式完成，以下是几种常见的方法：

使用CSS和Vue事件绑定

通过Vue的事件绑定和CSS的transform属性实现滑动效果。

<template>
  <div class="slider-container">
    <div 
      class="slider"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="{ transform: `translateX(${offsetX}px)` }"
    >
      <div class="slide">Slide 1</div>
      <div class="slide">Slide 2</div>
      <div class="slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0,
      currentX: 0
    }
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.currentX = this.offsetX
    },
    handleTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX
      this.offsetX = this.currentX + moveX
    },
    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.js）

Swiper.js是一个流行的滑动库，有专门的Vue组件版本。

npm install swiper@5 vue-awesome-swiper

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

使用Vue的transition组件

结合Vue的transition组件实现滑动动画效果。

<template>
  <div class="slider">
    <transition :name="transitionName">
      <div :key="currentSlide" class="slide">
        {{ slides[currentSlide] }}
      </div>
    </transition>
    <button @click="prev">Prev</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      currentSlide: 0,
      transitionName: 'slide-next'
    }
  },
  methods: {
    next() {
      this.transitionName = 'slide-next'
      this.currentSlide = (this.currentSlide + 1) % this.slides.length
    },
    prev() {
      this.transitionName = 'slide-prev'
      this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length
    }
  }
}
</script>

<style>
.slide {
  position: absolute;
  width: 100%;
}
.slide-next-enter-active,
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
  transition: transform 0.5s;
}
.slide-next-enter {
  transform: translateX(100%);
}
.slide-next-leave-to {
  transform: translateX(-100%);
}
.slide-prev-enter {
  transform: translateX(-100%);
}
.slide-prev-leave-to {
  transform: translateX(100%);
}
</style>

使用Vue的v-touch指令

如果使用Vuetify，可以利用其内置的v-touch指令实现滑动功能。

<template>
  <div v-touch:swipe.left="next" v-touch:swipe.right="prev">
    <div class="slide">
      {{ slides[currentSlide] }}
    </div>
  </div>
</template>

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

以上方法可以根据项目需求选择合适的方式实现左右滑动功能，纯CSS+Vue的方式适合简单需求，而Swiper等第三方库则提供了更丰富的功能和更好的移动端支持。