vue 实现滑动

Vue 实现滑动效果的方法

使用第三方库（如 Swiper）

Swiper 是一个流行的滑动库，支持 Vue 集成。安装 Swiper 后，可以通过 Vue 组件轻松实现滑动效果。

安装 Swiper：

npm install swiper vue-awesome-swiper

示例代码：

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

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

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

使用原生 CSS 和 Vue 事件

通过 CSS 的 transform 和 Vue 的事件监听，可以实现自定义滑动效果。

示例代码：

<template>
  <div class="slider-container" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag">
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="slide">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      offset: 0,
      startX: 0,
      isDragging: false
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX
    },
    drag(e) {
      if (!this.isDragging) return
      this.offset = e.clientX - this.startX
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.slider-container {
  overflow: hidden;
  width: 100%;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
}
.slide {
  flex: 0 0 100%;
}
</style>

使用 Vue 过渡动画

Vue 的 <transition> 和 <transition-group> 组件可以结合 CSS 动画实现滑动效果。

示例代码：

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

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

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

使用 Touch 事件实现移动端滑动

通过监听 touchstart、touchmove 和 touchend 事件，可以适配移动端滑动。

示例代码：

<template>
  <div class="slider" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <div class="slides" :style="{ transform: `translateX(${translateX}px)` }">
      <div v-for="(slide, index) in slides" :key="index" class="slide">
        {{ slide }}
      </div>
    </div>
  </div>
</template>

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

<style>
.slider {
  overflow: hidden;
  width: 100%;
}
.slides {
  display: flex;
  transition: transform 0.3s;
}
.slide {
  flex: 0 0 100%;
}
</style>