当前位置：首页 > VUE

vue横向滑动实现

2026-02-18 13:03:41VUE

vue横向滑动实现

在Vue中实现横向滑动可以通过多种方式完成，以下是几种常见的方法：

使用CSS样式控制

通过CSS的overflow-x和white-space属性实现横向滚动效果。创建一个容器，内部放置需要横向排列的元素。

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

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

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

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

使用第三方库（如Swiper）

Swiper是一个流行的滑动库，支持横向滑动、触摸滑动等功能。安装Swiper后，在Vue中引入并使用。

npm install swiper

<template>
  <swiper :slides-per-view="3" :space-between="50">
    <swiper-slide v-for="item in items" :key="item.id">
      {{ item.text }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    };
  },
};
</script>

使用Vue的Touch事件

通过监听触摸事件，手动实现横向滑动效果。适用于需要自定义滑动行为的场景。

<template>
  <div 
    class="touch-scroll-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    :style="{ transform: `translateX(${translateX}px)` }"
  >
    <div v-for="item in items" :key="item.id" class="touch-scroll-item">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      startX: 0,
      translateX: 0,
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      this.translateX += moveX;
      this.startX = e.touches[0].clientX;
    },
    handleTouchEnd() {
      // 滑动结束后的逻辑
    },
  },
};
</script>

<style>
.touch-scroll-container {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.touch-scroll-item {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  margin-right: 10px;
  background: #f0f0f0;
}
</style>

使用Vue的响应式设计

结合Vue的响应式数据和CSS Flexbox布局，实现动态横向滑动效果。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      itemWidth: 200,
    };
  },
};
</script>

<style>
.flex-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 10px;
}

.flex-scroll-item {
  flex-shrink: 0;
  height: 100px;
  background: #f0f0f0;
}
</style>

以上方法可以根据具体需求选择使用，CSS样式控制适合简单场景，Swiper适合复杂滑动需求，Touch事件适合高度自定义，Flexbox布局适合响应式设计。

vue横向滑动实现