vue实现滑动元素

Vue 实现滑动元素的几种方法

使用 CSS Transitions 和 Vue 绑定类名

通过 Vue 动态绑定类名，结合 CSS 的 transition 属性实现平滑滑动效果。定义一个 slide 类，在 Vue 中通过 v-bind:class 控制元素的显示和隐藏。

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div :class="{ 'slide': isActive }">滑动元素内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleSlide() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style>
.slide {
  transform: translateX(100px);
  transition: transform 0.3s ease;
}
</style>

使用 Vue Transition 组件

Vue 内置的 <transition> 组件可以方便地实现元素的过渡效果。结合 CSS 定义进入和离开的动画。

<template>
  <div>
    <button @click="show = !show">Toggle Slide</button>
    <transition name="slide-fade">
      <div v-if="show">滑动元素内容</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>

使用第三方库（如 Swiper.js）

对于复杂的滑动需求（如轮播图），可以使用 Swiper.js 等第三方库。Swiper 提供了丰富的滑动效果和配置选项。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

export default {
  mounted() {
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
    });
  }
};
</script>

使用手势库（如 Hammer.js）

如果需要支持触摸滑动，可以集成 Hammer.js 监听手势事件，并通过 Vue 控制元素位置。

<template>
  <div ref="slider" class="slider">滑动我</div>
</template>

<script>
import Hammer from 'hammerjs';

export default {
  mounted() {
    const slider = this.$refs.slider;
    const hammer = new Hammer(slider);
    let posX = 0;

    hammer.on('pan', (e) => {
      posX = e.deltaX;
      slider.style.transform = `translateX(${posX}px)`;
    });

    hammer.on('panend', () => {
      slider.style.transform = 'translateX(0)';
      slider.style.transition = 'transform 0.3s ease';
      setTimeout(() => {
        slider.style.transition = '';
      }, 300);
    });
  }
};
</script>

<style>
.slider {
  width: 100px;
  height: 100px;
  background: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

动态绑定样式实现拖动

通过 Vue 的 v-bind:style 动态绑定元素的 transform 属性，结合鼠标或触摸事件实现拖动效果。

<template>
  <div
    class="draggable"
    @mousedown="startDrag"
    @mousemove="onDrag"
    @mouseup="stopDrag"
    @mouseleave="stopDrag"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >拖动我</div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      offsetX: 0
    };
  },
  methods: {
    startDrag(e) {
      this.isDragging = true;
      this.startX = e.clientX - this.offsetX;
    },
    onDrag(e) {
      if (!this.isDragging) return;
      this.offsetX = e.clientX - this.startX;
    },
    stopDrag() {
      this.isDragging = false;
    }
  }
};
</script>

<style>
.draggable {
  width: 100px;
  height: 100px;
  background: #ff9a9e;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
}
</style>