当前位置：首页 > VUE

vue实现图片水平滚动

2026-02-23 10:07:12VUE

实现图片水平滚动的方案

使用Vue实现图片水平滚动可以通过多种方式完成，以下是几种常见的方法：

使用CSS Flexbox布局

通过CSS的flex布局结合Vue的动态数据绑定，可以实现简单的水平滚动效果。

<template>
  <div class="scroll-container">
    <div class="image-list">
      <img 
        v-for="(image, index) in images" 
        :key="index" 
        :src="image.src" 
        :alt="image.alt"
        class="image-item"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
        // 更多图片...
      ]
    };
  }
};
</script>

<style scoped>
.scroll-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.image-list {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.image-item {
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}
</style>

使用第三方库（如Swiper）

如果需要更丰富的交互效果（如自动轮播、分页器等），可以使用Swiper库。

<template>
  <swiper
    :slides-per-view="3"
    :space-between="20"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image.src" :alt="image.alt" />
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: { Swiper, SwiperSlide },
  data() {
    return {
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
      ]
    };
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log('slide change');
    }
  }
};
</script>

自定义滚动逻辑

如果需要完全自定义滚动行为，可以通过监听事件和操作DOM实现。

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="image-list" ref="imageList">
      <img 
        v-for="(image, index) in images" 
        :key="index" 
        :src="image.src" 
        :alt="image.alt"
        class="image-item"
      />
    </div>
    <button @click="scrollLeft">Left</button>
    <button @click="scrollRight">Right</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
      ],
      scrollAmount: 200
    };
  },
  methods: {
    scrollLeft() {
      this.$refs.scrollContainer.scrollBy({
        left: -this.scrollAmount,
        behavior: 'smooth'
      });
    },
    scrollRight() {
      this.$refs.scrollContainer.scrollBy({
        left: this.scrollAmount,
        behavior: 'smooth'
      });
    }
  }
};
</script>

<style scoped>
.scroll-container {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.image-list {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.image-item {
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}
</style>