前言
廢話不啰嗦，上圖為敬
做過前端開發(fā)的同學(xué)病瞳，開發(fā)中的banner輪播亲善、文字跑馬燈戏溺、旋轉(zhuǎn)木馬等實(shí)現(xiàn)經(jīng)常遇到耕拷，本著不重復(fù)造輪子的原則闰围，上圖這個(gè)開源swiper組件庫大家應(yīng)該都使用過碧查，
github星級(jí)之高迄沫，應(yīng)用之廣泛，支持框架之多(angular乐纸、react侧戴、vue积仗、svete等應(yīng)有盡有)，對(duì)比其他無出其右。缺點(diǎn)：英文文檔簡(jiǎn)陋至極渺氧，中文示例文檔是真的爛哩治，我只是想實(shí)現(xiàn)一個(gè)垂直滾動(dòng)（也叫縱向滾動(dòng)）效果，竟然需要到處查資料消别，到處采坑蛇券，相當(dāng)不人性化塘慕。
采坑過程
因?yàn)槲沂莢ite構(gòu)建的v3項(xiàng)目，使用官方示例Demo，npm install之后運(yùn)行，上來就報(bào)錯(cuò)
<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到我項(xiàng)目中，想想哪里不對(duì)牌芋，我肯定是被文檔帶偏了，我明明是npm 引入庫的方式，這是要我馬路上扛著自行車奔跑嘛不是徊都，放棄主之。
再回到官方文檔，找到了API方法
試了不行枉长，打印swiper傳參params等參數(shù)必峰，凡是能改direction屬性的凭需，都試了旗国，滾動(dòng)一頁寿冕，然后其他頁面不見了驼唱，再次放棄。
永不言棄
放棄了查看官方文檔县袱，跑去翻墻看博客式散，似乎發(fā)現(xiàn)了驚喜，然后一頓操作撕蔼，垂直滾動(dòng)的效果有了，但是滾動(dòng)了一頁就再也不能滾動(dòng)了是什么意思肾胯。
然后繼續(xù)回到swiper官方文檔艳馒，思考著是不是需要JS創(chuàng)建swiper才行能别威，繼續(xù)嘗試训堆，無果。
然后去github上找找靈感臀栈，發(fā)現(xiàn)了哪位大佬寫的 vue-awesome-swiper，安裝繼續(xù)嘗試挠乳，不行权薯，發(fā)現(xiàn)極少維護(hù)了，也沒有對(duì)swiper 7.3.2做支持睡扬，放棄盟蚣。
繼續(xù)翻墻，再次發(fā)現(xiàn)了什么卖怜，一評(píng)論區(qū)的小菜給 swiper 屎开，swiper-slide 加了固定寬度，就這樣马靠，有了Ｑ俪椤！甩鳄！
感謝小菜逞度，遠(yuǎn)離大佬，珍愛生命妙啃。
代碼實(shí)現(xiàn)
<template>
<!-- 輪播滾動(dòng) -->
<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>
<!-- 暫時(shí)加點(diǎn)顏色档泽，有被覆蓋的組件，都要加上背景色 -->
<section style="background-color: aqua">
<!--隱私-->
<page-privacy></page-privacy>
<!--下載-->
<page-download></page-download>
<!--底部申明-->
<Footer />
</section>
</template>
<style scoped>
.my-swiper {
height: 100vh;
}
</style>
到此揖赴，距離解決問題已經(jīng)過去了12個(gè)小時(shí)馆匿，期間茶水不思，頭發(fā)掉了若干燥滑。
總結(jié)
大家看到了渐北，我的每個(gè)
swiper-slide中的自定義組件，其實(shí)很復(fù)雜铭拧，嵌入了各種視頻腔稀、圖片盆昙、文字、彈窗甚至是地圖焊虏，不是簡(jiǎn)單的輪播幾張圖片或者文字淡喜，所以，找問題先分析應(yīng)用場(chǎng)景诵闭，思索 => 腦海里有了方案 => actionＡ锻拧！疏尿！
打工人打工魂瘟芝，十年打工人上人。
點(diǎn)贊加關(guān)注褥琐，永遠(yuǎn)不迷路
