当前位置：首页 > VUE

vue实现列表左右滑动

2026-02-22 19:42:41VUE

实现列表左右滑动的方法

在Vue中实现列表左右滑动通常可以通过以下方法完成，具体取决于项目需求和技术栈。

使用CSS和Touch事件

通过CSS的overflow-x和touch事件实现简单滑动效果。

vue实现列表左右滑动

<template>
  <div class="slider-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <div class="slider-content" :style="{ transform: `translateX(${offsetX}px)` }">
      <div v-for="item in items" :key="item.id" class="slider-item">
        {{ item.text }}
      </div>
    </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,
      offsetX: 0,
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      const moveX = e.touches[0].clientX - this.startX;
      this.offsetX += moveX;
      this.startX = e.touches[0].clientX;
    },
  },
};
</script>

<style>
.slider-container {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  touch-action: pan-y;
}
.slider-content {
  display: inline-flex;
  transition: transform 0.3s ease;
}
.slider-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background: #eee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>

使用第三方库（如Swiper）

Swiper是一个流行的滑动库，支持Vue集成，提供丰富的配置和效果。

vue实现列表左右滑动

<template>
  <swiper :options="swiperOptions">
    <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' },
      ],
      swiperOptions: {
        slidesPerView: 'auto',
        spaceBetween: 10,
        freeMode: true,
      },
    };
  },
};
</script>

<style>
.swiper-slide {
  width: 100px;
  height: 100px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用Vue专用滑动组件（如vue-slick）

vue-slick是另一个轻量级滑动组件，适合简单需求。

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

<script>
import Slick from 'vue-slick';

export default {
  components: { Slick },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
      slickOptions: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: false,
      },
    };
  },
};
</script>

<style>
.slick-slide {
  width: 100px;
  height: 100px;
  background: #eee;
  margin: 0 10px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
</style>

使用CSS Scroll Snap

现代CSS的scroll-snap属性可以轻松实现滑动效果，无需JavaScript。

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id" class="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' },
      ],
    };
  },
};
</script>

<style>
.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 10px 0;
}
.scroll-item {
  scroll-snap-align: start;
  min-width: 100px;
  height: 100px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
</style>