vue实现整页轮播

Vue实现整页轮播的方法

使用第三方库（如Swiper）

安装Swiper库并集成到Vue项目中：

npm install swiper

在Vue组件中引入Swiper：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(slide, index) in slides" :key="index">
        {{ slide.content }}
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      slides: [
        { content: 'Page 1' },
        { content: 'Page 2' },
        { content: 'Page 3' }
      ]
    };
  },
  mounted() {
    new Swiper('.swiper-container', {
      direction: 'vertical',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }
};
</script>

<style scoped>
.swiper-container {
  height: 100vh;
  width: 100%;
}
.swiper-slide {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

纯Vue实现

不使用第三方库，通过Vue的transition和动态样式实现：

<template>
  <div class="fullpage-container">
    <div 
      class="fullpage-slide" 
      v-for="(slide, index) in slides" 
      :key="index"
      :style="{ transform: `translateY(-${currentIndex * 100}%)` }"
    >
      {{ slide.content }}
    </div>
    <div class="controls">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      slides: [
        { content: 'Page 1' },
        { content: 'Page 2' },
        { content: 'Page 3' }
      ]
    };
  },
  methods: {
    prev() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    next() {
      if (this.currentIndex < this.slides.length - 1) {
        this.currentIndex++;
      }
    }
  }
};
</script>

<style scoped>
.fullpage-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.fullpage-slide {
  height: 100vh;
  width: 100%;
  position: absolute;
  transition: transform 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

添加过渡动画效果

为轮播切换添加更流畅的动画：

<template>
  <div class="fullpage-container">
    <transition-group name="slide" tag="div">
      <div 
        class="fullpage-slide" 
        v-for="(slide, index) in slides" 
        :key="index"
        v-show="index === currentIndex"
      >
        {{ slide.content }}
      </div>
    </transition-group>
  </div>
</template>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter {
  transform: translateY(100%);
}
.slide-leave-to {
  transform: translateY(-100%);
}
</style>

响应式处理

确保在不同屏幕尺寸下正常显示：

@media (max-width: 768px) {
  .fullpage-slide {
    font-size: 16px;
  }
}

自动轮播功能

添加定时自动切换功能：

export default {
  // ...
  mounted() {
    this.autoPlay = setInterval(() => {
      this.next();
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(this.autoPlay);
  }
  // ...
}

以上方法提供了从简单到复杂的整页轮播实现方案，可根据项目需求选择适合的方式。第三方库方案功能更丰富但体积较大，纯Vue实现更轻量但功能相对简单。