当前位置：首页 > VUE

vue实现滑动框

2026-02-17 08:24:15VUE

Vue 实现滑动框的方法

使用 CSS 和 Vue 实现基础滑动框

在 Vue 中实现滑动框可以通过结合 CSS 的 transform 和 Vue 的数据绑定来实现。以下是一个简单的实现方式：

<template>
  <div class="slider-container">
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="slide">
        {{ item }}
      </div>
    </div>
    <button @click="prev">Previous</button>
    <button @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      offset: 0,
      slideWidth: 300
    };
  },
  methods: {
    prev() {
      this.offset = Math.min(this.offset + this.slideWidth, 0);
    },
    next() {
      this.offset = Math.max(
        this.offset - this.slideWidth,
        -this.slideWidth * (this.items.length - 1)
      );
    }
  }
};
</script>

<style>
.slider-container {
  width: 300px;
  overflow: hidden;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
}
.slide {
  flex: 0 0 300px;
  height: 200px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用第三方库（如 Swiper）

对于更复杂的滑动框需求，可以使用专为 Vue 设计的滑动库，如 swiper/vue：

npm install swiper

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in items" :key="index">
      {{ item }}
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4']
    };
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log('slide change');
    }
  }
};
</script>

实现触摸滑动支持

如果需要支持触摸滑动，可以结合 hammer.js 或使用上述的 swiper 库，后者已内置触摸支持。以下是使用 hammer.js 的基本示例：

npm install hammerjs

<template>
  <div ref="slider" class="slider">
    <div v-for="(item, index) in items" :key="index" class="slide">
      {{ item }}
    </div>
  </div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      offset: 0
    };
  },
  mounted() {
    const slider = this.$refs.slider;
    const hammer = new Hammer(slider);
    hammer.on('swipeleft', () => {
      this.offset -= 100;
    });
    hammer.on('swiperight', () => {
      this.offset += 100;
    });
  }
};
</script>

响应式滑动框

为了使滑动框适应不同屏幕尺寸，可以结合 CSS 媒体查询和 Vue 的计算属性：

vue实现滑动框

<template>
  <div class="slider-container">
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="slide">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'],
      offset: 0
    };
  },
  computed: {
    slideWidth() {
      return window.innerWidth < 768 ? 200 : 300;
    }
  }
};
</script>

<style>
@media (max-width: 768px) {
  .slide {
    width: 200px;
  }
}
</style>

以上方法可以根据具体需求选择或组合使用。使用原生 CSS 和 Vue 适合简单场景，而 swiper 等库则适合复杂需求。

标签: vue