vue 实现图片滚动

在Vue中实现图片滚动，可以使用v-for结合transition来创建流畅的图片轮播效果。以下是一个简单的例子：

<template>
  <div class="image-carousel">
    <div
      class="carousel-wrapper"
      :style="{ 'transform': `translateX(${currentOffset}px)` }"
    >
      <div
        v-for="(image, index) in images"
        :key="image"
        class="carousel-item"
      >
        <img :src="image" alt="">
        <button @click="goToSlide(index)">Go to Slide {{ index + 1 }}</button>
      </div>
    </div>
    <button @click="goToPrev">Prev</button>
    <button @click="goToNext">Next</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        // ...
      ],
    };
  },
  computed: {
    currentOffset() {
      return this.currentIndex * -100; // 假设每个图片占100px宽
    },
  },
  methods: {
    goToPrev() {
      this.currentIndex = Math.max(this.currentIndex - 1, 0);
    },
    goToNext() {
      this.currentIndex = Math.min(this.currentIndex + 1, this.images.length - 1);
    },
    goToSlide(index) {
      this.currentIndex = index;
    },
  },
};
</script>
 
<style scoped>
.carousel-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}
 
.carousel-item {
  width: 100px; /* 假设每个图片宽100px */
}
 
img {
  width: 100%;
}
</style>

在这个例子中，.carousel-wrapper是包含所有图片的容器，并且通过计算属性currentOffset来动态设置transform样式实现图片的滚动。goToPrev和goToNext方法用来切换当前图片的索引，而goToSlide可以直接跳转到指定索引的图片。按钮"Prev"和"Next"分别用来触发前一张和后一张图片的切换。