vue3 swiper实现全屏滚动，鼠标滚轮控制翻页

先来看效果图

大部分官网会用到这种效果

实现以上效果，一屏一屏显示，通过鼠标滚轮上下来切换翻页。也可以实现，点击小圆点进行切换。 本文使用的vue3+swiper。 使用的swiper版本是"swiper": "^11.1.4"。

实现方式，首先安装swiper

 npm i swiper

直接附上页面完整的代码：

<template>
  <div class="app-container">
    <swiper
      :noSwiping="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      direction="vertical"
      :modules="modules"
      :mousewheel="{ mousewheel: true }"
      :pagination="{ clickable: true }"
    >
      <swiper-slide>
        <div style="background-color: #fe6464" class="item">
          <div class="ani name">1</div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div style="background-color: #feb278" class="item">
          <div class="name">2</div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div style="background-color: #ffcf69" class="item">
          <div class="name">3</div>
        </div>
       </swiper-slide>
      <swiper-slide>
        <div style="background-color: #b1dd52" class="item">
          <div class="name">4</div>
        </div>
       </swiper-slide>
      <swiper-slide>
        <div style="background-color: #4253c5" class="item">
          <div class="name">5</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
// 导入swiper组件
import { Swiper, SwiperSlide } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
// 引入swiper核心和所需模块
import { Mousewheel, Pagination } from "swiper/modules";

const modules = [Mousewheel, Pagination];
// swiper实例
const homeSwiper = ref(null);

// 初始化
const onSwiper = (swiper) => {
  homeSwiper.value = swiper;
};
// swiper切换时触发
const onSlideChange = (swiper) => {
    
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;
}
.item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .name {
    font-size: 100px;
    color: #fff;
  }
}
.swiper {
  width: 100%;
  height: 100%;
}
</style>

以上是基本示例，关于swiper的其他效果可以参考作者其他文章。