vue实现左右滑动

Vue 实现左右滑动效果

使用 touch 事件实现基础滑动

在 Vue 中可以通过监听 touchstart、touchmove 和 touchend 事件来实现基础的左右滑动效果。需要记录触摸起始位置和移动距离，通过计算差值判断滑动方向。

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="slider-container"
  >
    <div class="slider-content" :style="{ transform: `translateX(${offsetX}px)` }">
      <!-- 滑动内容 -->
    </div>
  </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
      // 根据滑动距离判断方向
      if (Math.abs(this.offsetX) > 50) {
        // 执行滑动后的操作
      }
      this.offsetX = 0 // 复位
    }
  }
}
</script>

<style>
.slider-container {
  overflow: hidden;
  width: 100%;
}
.slider-content {
  transition: transform 0.3s ease;
  will-change: transform;
}
</style>

使用第三方库实现高级滑动

对于更复杂的滑动需求，可以使用专门的 Vue 滑动组件库如 vue-awesome-swiper 或 vue-slick，这些库提供了丰富的配置选项和回调函数。

安装 swiper 和 vue-awesome-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/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: ['Slide 1', 'Slide 2', 'Slide 3'],
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

使用 CSS Scroll Snap 实现简单滑动

现代浏览器支持 CSS Scroll Snap 特性，可以实现简单的滑动效果而无需 JavaScript：

<template>
  <div class="scroll-container">
    <div class="scroll-area" v-for="n in 5" :key="n">
      Item {{ n }}
    </div>
  </div>
</template>

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

.scroll-area {
  scroll-snap-align: start;
  min-width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
</style>

实现无限循环滑动

对于需要无限循环的滑动效果，可以通过动态调整内容位置来实现：

<template>
  <div class="infinite-slider" ref="slider">
    <div 
      v-for="(item, index) in items" 
      :key="index"
      class="slide"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.startAutoSlide()
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    startAutoSlide() {
      this.interval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length
        this.$refs.slider.style.transform = `translateX(-${this.currentIndex * 100}%)`
      }, 3000)
    }
  }
}
</script>

<style>
.infinite-slider {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}
.slide {
  flex: 0 0 100%;
}
</style>

响应式滑动实现

对于需要响应不同屏幕尺寸的滑动效果，可以结合 CSS 媒体查询和 JavaScript 计算：

// 在组件中添加
computed: {
  slidesPerView() {
    if (window.innerWidth < 768) {
      return 1
    } else if (window.innerWidth < 1024) {
      return 2
    } else {
      return 3
    }
  }
},
watch: {
  slidesPerView(newVal) {
    this.swiperOptions.slidesPerView = newVal
    if (this.swiper) {
      this.swiper.update()
    }
  }
}

每种方法适用于不同场景，基础触摸事件适合简单交互，第三方库提供完整功能，CSS Scroll Snap 适合轻量级实现，无限循环和响应式则针对特定需求。根据项目需求选择最适合的方案。