当前位置：首页 > VUE

vue实现滑动

2026-02-25 14:58:30VUE

Vue 实现滑动效果

使用 CSS Transitions

在 Vue 中可以通过 CSS 的 transition 属性实现平滑的滑动效果。定义一个 CSS 类，包含过渡属性，并通过 Vue 的动态类绑定控制元素的显示和隐藏。

vue实现滑动

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <div :class="{ 'slide': isActive }" class="slide-container">
      Content to slide
    </div>
  </div>
</template>

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

<style>
.slide-container {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.slide {
  height: 100px;
}
</style>

使用 Vue Transition 组件

Vue 提供了内置的 <transition> 组件，可以方便地实现进入和离开的动画效果。结合 CSS 可以创建滑动效果。

vue实现滑动

<template>
  <div>
    <button @click="show = !show">Toggle Slide</button>
    <transition name="slide">
      <div v-if="show" class="slide-content">
        Content to slide
      </div>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}
.slide-content {
  height: 100px;
  background: #f0f0f0;
}
</style>

使用第三方库（如 vue-smooth-slide）

如果需要更复杂的滑动效果，可以考虑使用第三方库如 vue-smooth-slide。安装后可以直接在组件中使用。

npm install vue-smooth-slide

<template>
  <div>
    <button @click="toggleSlide">Toggle Slide</button>
    <smooth-slide :toggle="isActive">
      <div class="slide-content">
        Content to slide
      </div>
    </smooth-slide>
  </div>
</template>

<script>
import SmoothSlide from 'vue-smooth-slide';

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

<style>
.slide-content {
  height: 100px;
  background: #f0f0f0;
}
</style>

手势滑动（如 touch 事件）

如果需要实现手势滑动效果，可以通过监听 touchstart、touchmove 和 touchend 事件来实现。

<template>
  <div
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="slider"
    :style="{ transform: `translateX(${offsetX}px)` }"
  >
    Slide me
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      offsetX: 0
    };
  },
  methods: {
    handleTouchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    handleTouchMove(e) {
      const currentX = e.touches[0].clientX;
      this.offsetX = currentX - this.startX;
    },
    handleTouchEnd() {
      this.offsetX = 0;
    }
  }
};
</script>

<style>
.slider {
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  transition: transform 0.3s ease;
}
</style>

以上方法可以根据需求选择适合的方式实现滑动效果。

标签: vue