当前位置：首页 > VUE

vue实现图片横向滚动

2026-02-23 16:40:15VUE

实现图片横向滚动的 Vue 方法

使用 CSS Flex 布局和 overflow

通过 CSS Flex 布局结合 overflow-x: auto 实现横向滚动效果。适用于简单的图片列表横向滚动需求。

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

<script>
export default {
  data() {
    return {
      images: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        'path/to/image3.jpg',
        // 更多图片...
      ]
    }
  }
}
</script>

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

.image-list {
  display: flex;
  gap: 10px; /* 图片间距 */
  padding: 10px 0;
}

.image-item {
  width: 200px; /* 固定宽度 */
  height: 150px; /* 固定高度 */
  object-fit: cover;
  flex-shrink: 0; /* 防止图片缩小 */
}
</style>

使用第三方库（如 vue-horizontal）

对于更复杂的横向滚动需求（如分页、响应式控制），可以使用专用库如 vue-horizontal。

安装依赖：

npm install vue-horizontal

示例代码：

<template>
  <vue-horizontal>
    <img 
      v-for="(image, index) in images" 
      :key="index" 
      :src="image" 
      class="image"
    />
  </vue-horizontal>
</template>

<script>
import VueHorizontal from "vue-horizontal";

export default {
  components: { VueHorizontal },
  data() {
    return {
      images: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        // 更多图片...
      ]
    }
  }
}
</script>

<style>
.image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  margin-right: 16px;
}
</style>

自定义滚动按钮控制

通过 ref 操作 DOM 实现手动控制滚动，适合需要自定义按钮交互的场景。

<template>
  <div class="scroll-wrapper">
    <button @click="scroll(-100)">←</button>
    <div class="scroll-container" ref="scrollContainer">
      <div class="image-list">
        <img 
          v-for="(image, index) in images" 
          :key="index" 
          :src="image" 
          class="image-item"
        />
      </div>
    </div>
    <button @click="scroll(100)">→</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [/* 图片数组 */]
    }
  },
  methods: {
    scroll(offset) {
      this.$refs.scrollContainer.scrollBy({
        left: offset,
        behavior: 'smooth'
      });
    }
  }
}
</script>

<style>
.scroll-wrapper {
  display: flex;
  align-items: center;
}

.scroll-container {
  width: 80%;
  overflow-x: auto;
  scroll-behavior: smooth;
}

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

.image-item {
  width: 180px;
  height: 120px;
  object-fit: cover;
}
</style>

响应式设计建议

添加媒体查询适应不同屏幕尺寸：

@media (max-width: 768px) {
  .image-item {
    width: 120px;
    height: 90px;
  }
}

性能优化提示

对大量图片使用懒加载：
```
<img loading="lazy" ... />
```

使用 IntersectionObserver 实现动态加载：


// 在 mounted 中观察图片可见性
mounted() {
const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
   if (entry.isIntersecting) {
     entry.target.src = entry.target.dataset.src;
     observer.unobserve(entry.target);
   }
 });
});

document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); }); }

vue实现图片横向滚动