当前位置：首页 > VUE

vue横向滑动怎么实现

2026-01-21 06:23:35VUE

实现横向滑动的几种方法

使用CSS的overflow和white-space属性

在Vue中可以通过CSS样式实现横向滑动效果。创建一个容器元素并设置overflow-x: auto和white-space: nowrap，子元素设置为display: inline-block。

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

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

使用第三方库（如Swiper）

Swiper是一个流行的滑动组件库，支持横向滑动和多种自定义选项。

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="item in items" :key="item.id">
      {{ item.content }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      items: [...],
      swiperOptions: {
        slidesPerView: 'auto',
        spaceBetween: 10,
        freeMode: true,
      },
    };
  },
};
</script>

使用CSS Flexbox布局

Flexbox也可以实现横向滑动效果，结合overflow-x: auto确保内容超出容器时可以滚动。

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

<style>
.flex-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}
.flex-item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}
</style>

使用Vue的指令实现拖动效果

如果需要手动拖动效果，可以通过Vue指令结合touch事件实现。

<template>
  <div 
    class="drag-scroll-container" 
    ref="container"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
    @touchstart="startDrag"
    @touchmove="onDrag"
    @touchend="endDrag"
  >
    <div v-for="item in items" :key="item.id" class="drag-item">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      isDragging: false,
      startX: 0,
      scrollLeft: 0,
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.pageX || e.touches[0].pageX;
      this.scrollLeft = this.$refs.container.scrollLeft;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      e.preventDefault();
      const x = e.pageX || e.touches[0].pageX;
      const walk = (x - this.startX) * 2;
      this.$refs.container.scrollLeft = this.scrollLeft - walk;
    },
    endDrag() {
      this.isDragging = false;
    },
  },
};
</script>

<style>
.drag-scroll-container {
  display: flex;
  overflow-x: auto;
  cursor: grab;
  user-select: none;
}
.drag-scroll-container:active {
  cursor: grabbing;
}
.drag-item {
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background-color: #f0f0f0;
}
</style>

以上方法可以根据需求选择，CSS方法简单高效，Swiper适合复杂场景，自定义指令则提供更多灵活性。

vue横向滑动怎么实现