vue实现横向滚动

vue实现横向滚动

使用CSS的overflow-x属性结合Vue的模板和样式绑定，可以轻松实现横向滚动效果。

方法一：纯CSS实现

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

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

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

.item {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background: #eee;
}
</style>

方法二：使用第三方库 安装vue-horizontal-scroll库：

npm install vue-horizontal-scroll

在组件中使用：

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

<script>
import VueHorizontalScroll from 'vue-horizontal-scroll'

export default {
  components: {
    VueHorizontalScroll
  },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

方法三：自定义滚动行为 通过监听鼠标事件和触摸事件实现更复杂的交互：

<template>
  <div 
    class="scroll-container" 
    ref="scrollContainer"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    @mouseleave="stopDrag"
    @touchstart="startDrag"
    @touchmove="onDrag"
    @touchend="stopDrag"
  >
    <div class="scroll-content" :style="{ transform: `translateX(${scrollX}px)` }">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      scrollX: 0,
      items: [...]
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
    },
    onDrag(e) {
      if (!this.isDragging) return
      const x = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      const walk = x - this.startX
      this.scrollX += walk
      this.startX = x
    },
    stopDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden;
  cursor: grab;
}

.scroll-content {
  display: flex;
  transition: transform 0.3s ease;
}

.scroll-container:active {
  cursor: grabbing;
}

.item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background: #eee;
}
</style>

注意事项

确保容器有明确的宽度限制，否则横向滚动可能不会按预期工作。

对于移动端设备，需要添加-webkit-overflow-scrolling: touch以启用平滑滚动：

.horizontal-scroll-container {
  -webkit-overflow-scrolling: touch;
}

考虑添加滚动条样式美化或隐藏，根据项目需求调整：

.horizontal-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}