vue实现水平滚动

vue实现水平滚动的方法

使用CSS样式控制

在Vue组件中添加CSS样式，设置父容器为overflow-x: auto，子元素为display: inline-block或flex布局。

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

<style>
.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-item {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
}
</style>

使用flex布局

通过flex布局实现水平滚动，适合需要响应式调整的场景。

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

<style>
.flex-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}
.flex-item {
  flex: 0 0 auto;
  width: 200px;
}
</style>

使用第三方库

如果需要更复杂的功能（如平滑滚动、吸附效果），可以引入第三方库如vue-horizontal-scroll。

npm install vue-horizontal-scroll

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

<script>
import VueHorizontalScroll from 'vue-horizontal-scroll'
export default {
  components: { VueHorizontalScroll }
}
</script>

自定义指令实现滚动控制

通过Vue自定义指令实现手动控制滚动行为。

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

<script>
export default {
  directives: {
    'horizontal-scroll': {
      inserted(el) {
        el.addEventListener('wheel', (e) => {
          e.preventDefault()
          el.scrollLeft += e.deltaY
        })
      }
    }
  }
}
</script>

响应式宽度调整

结合Vue的计算属性动态计算子元素宽度，适应不同屏幕尺寸。

<template>
  <div class="responsive-scroll">
    <div 
      v-for="item in items" 
      :key="item.id" 
      :style="{ width: itemWidth + 'px' }"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    itemWidth() {
      return window.innerWidth < 768 ? 150 : 200
    }
  }
}
</script>