当前位置：首页 > VUE

vue实现页面滑动效果

2026-02-22 15:12:49VUE

Vue 实现页面滑动效果的方法

使用 CSS Transitions 和 Vue 指令

通过 Vue 的 v-bind 和 CSS transitions 结合实现滑动效果。定义一个数据属性控制元素的显示状态，通过 CSS 过渡动画实现平滑滑动。

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

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

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

使用 Vue Transition 组件

Vue 内置的 <transition> 组件可以方便地实现进入/离开的过渡效果。结合 CSS 动画或第三方动画库（如 Animate.css）实现滑动。

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

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateY(-100%);
}
.slide-content {
  height: 100px;
  background: #eee;
}
</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/css/swiper.css';

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

实现横向滑动导航

通过 Vue 控制 transform: translateX 实现横向滑动导航菜单。

vue实现页面滑动效果

<template>
  <div class="slider-container">
    <div class="slider" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="item in items" :key="item" class="slider-item">{{ item }}</div>
    </div>
    <button @click="scroll(-100)">Prev</button>
    <button @click="scroll(100)">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      offset: 0,
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
    };
  },
  methods: {
    scroll(amount) {
      this.offset += amount;
    }
  }
};
</script>

<style>
.slider-container {
  overflow: hidden;
  width: 300px;
}
.slider {
  display: flex;
  transition: transform 0.3s ease;
}
.slider-item {
  min-width: 100px;
  padding: 10px;
}
</style>