前言
废话不啰嗦，上图为敬
做过前端开发的同学，开发中的banner轮播、文字跑马灯、旋转木马等实现经常遇到，本着不重复造轮子的原则，上图这个开源swiper组件库大家应该都使用过，
github星级之高，应用之广泛，支持框架之多(angular、react、vue、svete等应有尽有)，对比其他无出其右。缺点：英文文档简陋至极，中文示例文档是真的烂，我只是想实现一个垂直滚动（也叫纵向滚动）效果，竟然需要到处查资料，到处采坑，相当不人性化。
采坑过程
因为我是vite构建的v3项目，使用官方示例Demo，npm install之后运行，上来就报错
<template>
<main>
<swiper
@swiper="onSwiper"
:slidesPerView="3"
:spaceBetween="50"
navigation
:scrollbar="{ draggable: true }"
:pagination="{ clickable: true }"
:modules="modules"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
</swiper>
</main>
</template>
<script>
// eslint-disable-next-line
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
// eslint-disable-next-line
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper) => {
window.swiper = swiper;
};
return {
modules: [Navigation, Pagination, Scrollbar, A11y],
onSwiper,
};
},
};
</script>
然后查看了配置文件vite.config.js 添加 resolve.alias，如下
import path from 'path';
import vue from '@vitejs/plugin-vue';
export default {
plugins: [vue()],
resolve: {
alias: {
swiper: path.resolve(__dirname, '../../dist/'),
},
},
};
接着我还需要拷贝一份dist到我项目中，想想哪里不对，我肯定是被文档带偏了，我明明是npm 引入库的方式，这是要我马路上扛着自行车奔跑嘛不是，放弃。
再回到官方文档，找到了API方法
试了不行，打印swiper传参params等参数，凡是能改direction属性的，都试了，滚动一页，然后其他页面不见了，再次放弃。
永不言弃
放弃了查看官方文档，跑去翻墙看博客，似乎发现了惊喜，然后一顿操作，垂直滚动的效果有了，但是滚动了一页就再也不能滚动了是什么意思。
然后继续回到swiper官方文档，思考着是不是需要JS创建swiper才行能，继续尝试，无果。
然后去github上找找灵感，发现了哪位大佬写的 vue-awesome-swiper，安装继续尝试，不行，发现极少维护了，也没有对swiper 7.3.2做支持，放弃。
继续翻墙，再次发现了什么，一评论区的小菜给 swiper ，swiper-slide 加了固定宽度，就这样，有了！！！
感谢小菜，远离大佬，珍爱生命。
代码实现
<template>
<!-- 轮播滚动 -->
<swiper
:modules="[Mousewheel]"
:mousewheel="{ releaseOnEdges: true }"
:direction="'vertical'"
class="my-swiper"
>
<swiper-slide style="height: 100vh">
<GuideGallery />
</swiper-slide>
<swiper-slide style="height: 100vh">
<GuideExplore />
</swiper-slide>
<swiper-slide style="height: 100vh">
<GuidePetalmaps />
</swiper-slide>
<swiper-slide style="height: 100vh" v-slot="{ isActive }">
<GuideDynamic :isActive="isActive" />
</swiper-slide>
<swiper-slide style="height: 100vh" v-slot="{ isActive }">
<GuidePrefer :isActive="isActive" />
</swiper-slide>
<swiper-slide style="height: 100vh" v-slot="{ isActive }">
<GuideMultiRoute :isActive="isActive" />
</swiper-slide>
<swiper-slide style="height: 100vh" v-slot="{ isActive }">
<GuideAlongSearch :isActive="isActive" />
</swiper-slide>
<swiper-slide style="height: 100vh" v-slot="{ isActive }">
<GuideNearby :isActive="isActive" />
</swiper-slide>
</swiper>
<!-- 暂时加点颜色，有被覆盖的组件，都要加上背景色 -->
<section style="background-color: aqua">
<!--隐私-->
<page-privacy></page-privacy>
<!--下载-->
<page-download></page-download>
<!--底部申明-->
<Footer />
</section>
</template>
<style scoped>
.my-swiper {
height: 100vh;
}
</style>
到此，距离解决问题已经过去了12个小时，期间茶水不思，头发掉了若干。
总结
大家看到了，我的每个
swiper-slide中的自定义组件，其实很复杂，嵌入了各种视频、图片、文字、弹窗甚至是地图，不是简单的轮播几张图片或者文字，所以，找问题先分析应用场景，思索 => 脑海里有了方案 => action！！！
打工人打工魂，十年打工人上人。
点赞加关注，永远不迷路
