当前位置：首页 > VUE

vue实现内容左右滚动

2026-02-21 02:04:55VUE

实现内容左右滚动的方案

使用CSS和Vue指令

通过CSS的overflow-x属性结合Vue的模板结构实现横向滚动效果。

<template>
  <div class="scroll-container">
    <div class="content-wrapper">
      <div v-for="item in items" :key="item.id" class="scroll-item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...更多项目
      ]
    }
  }
}
</script>

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

.content-wrapper {
  display: inline-block;
}

.scroll-item {
  display: inline-block;
  width: 200px;
  padding: 10px;
  margin-right: 10px;
  background: #f0f0f0;
}
</style>

使用第三方库

对于更复杂的滚动需求，可以考虑使用vue-horizontal等专门库。

安装依赖：

npm install vue-horizontal

实现代码：

<template>
  <vue-horizontal>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
  </vue-horizontal>
</template>

<script>
import VueHorizontal from 'vue-horizontal'

export default {
  components: { VueHorizontal },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...更多项目
      ]
    }
  }
}
</script>

添加滚动按钮控制

通过JavaScript控制滚动位置，实现按钮点击滚动效果。

<template>
  <div>
    <button @click="scroll(-100)">左滚</button>
    <div ref="scrollContainer" class="scroll-container">
      <div class="content-wrapper">
        <div v-for="item in items" :key="item.id" class="scroll-item">
          {{ item.text }}
        </div>
      </div>
    </div>
    <button @click="scroll(100)">右滚</button>
  </div>
</template>

<script>
export default {
  methods: {
    scroll(offset) {
      this.$refs.scrollContainer.scrollLeft += offset
    }
  }
}
</script>

响应式设计考虑

根据容器宽度自动调整项目显示数量，需要结合ResizeObserver API。

mounted() {
  const observer = new ResizeObserver(entries => {
    const containerWidth = entries[0].contentRect.width
    // 根据宽度调整项目显示逻辑
  })
  observer.observe(this.$refs.scrollContainer)
}

性能优化建议

对于大量滚动项目，建议实现虚拟滚动技术，只渲染可视区域内的元素。

vue实现内容左右滚动

<template>
  <div ref="viewport" class="viewport" @scroll="handleScroll">
    <div class="scroll-content" :style="{ width: totalWidth + 'px' }">
      <div v-for="item in visibleItems" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

每种方案适用于不同场景，CSS方案适合简单需求，第三方库提供更多功能，自定义控制方案灵活性最高，虚拟滚动适合大数据量情况。