vue实现图片滑动

实现图片滑动的基本思路

在Vue中实现图片滑动通常结合CSS过渡或动画效果，通过动态绑定样式或类名控制图片位置。核心是利用transform: translateX()横向移动图片容器，或使用第三方库（如Swiper.js）快速实现复杂交互。

使用原生Vue实现

模板结构

<template>
  <div class="slider-container">
    <div 
      class="slider-track" 
      :style="{ transform: `translateX(${currentPosition}px)` }"
    >
      <img v-for="(img, index) in images" :key="index" :src="img" class="slide-image">
    </div>
    <button @click="prevSlide">上一张</button>
    <button @click="nextSlide">下一张</button>
  </div>
</template>

脚本逻辑

<script>
export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0,
      slideWidth: 300 // 单张图片宽度
    };
  },
  computed: {
    currentPosition() {
      return -this.currentIndex * this.slideWidth;
    }
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prevSlide() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    }
  }
};
</script>

样式优化

<style>
.slider-container {
  overflow: hidden;
  width: 300px; /* 可视区域宽度 */
  position: relative;
}
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slide-image {
  width: 300px;
  flex-shrink: 0;
}
</style>

使用Swiper.js库实现

安装Swiper：

npm install swiper

组件实现

<template>
  <swiper
    :slides-per-view="1"
    :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
  >
    <swiper-slide v-for="(img, index) in images" :key="index">
      <img :src="img" class="swiper-image">
    </swiper-slide>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    };
  }
};
</script>

添加触摸滑动支持

对于移动端，可通过@touchstart、@touchmove、@touchend事件实现触摸滑动。或直接使用Swiper的触摸模块（默认已启用）：

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y } from 'swiper';

export default {
  setup() {
    return {
      modules: [Navigation, Pagination, A11y]
    };
  }
};

无限循环与自动播放

通过Swiper配置实现高级功能：

<swiper
  :loop="true"
  :autoplay="{ delay: 2500, disableOnInteraction: false }"
>
  <!-- slides -->
</swiper>

性能优化建议

• 使用v-lazy-image懒加载图片
• 对动态加载的图片预加载
• 避免频繁操作DOM，利用CSS硬件加速（如will-change: transform）
• 分页器可通过Swiper的pagination参数快速添加