同時支持vue2 vue3 React，支持默認安裝的 swiper8 版本，支持 TS ，無論是不是TS項目都可使用，親測有效，支持異步獲取數據
由于公司重構項目需要，好多關于輪播的東西都是使用swiper實現的，所以在重構中引入swiper進入了好多坑，希望這篇文檔能能給予同學們幫助
最終實現的效果：
微信截圖_20210326121325.png
一、使用的框架 vue3 + ts + vue-awesome-swiper （一次失敗的嘗試,可以不看這段）
使用vue-awesome-swiper
和大多同學一樣，網上直接拿來了關于vue-awesome-swiper的文檔便開始安裝配置，結果發現在main.ts中類型報錯，于是各種解決問題，聲明類型定義文件等等，結果發現根本不起作用
11111111.png
所以認為是沒有類型定義文件，于是在shims-vue.d.ts中定義了
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module 'vue-awesome-swiper'
結果卻是：
2222222.png
我去查插件的文檔，通過查看issues我會發現了此插件并不支持vue3.0，這不是太坑了嗎，浪費了好多時間，所以引入插件還是要看看是不是支持相應框架在引入，切記；但是還是需要swiper，我不死心，發現swiper是支持vue3的，于是。。。
二、使用的框架 vue3 + ts + swiper8（可以仔細看了，能直接用）
安裝：
cnpm install swiper --save
我們默認安裝的swiper8.0，這個就有一些坑要處理,如下：
1、使用某些功能需要按需引入需要相應的包，如翻頁，自動播放等
2、解決了一些同學發現的左右翻頁標簽，小圓點出不來等問題
3、還無法實現全局引用，都為局部引用
直接上全部代碼；本代碼為vue3 + ts + swiper8，仔細看代碼可以發現，并不需要 swiper 對 ts 進行特殊處理，是因為 swiper6 同時支持了 ts 包含了相應的類型定義文件（xxx.d.ts），所以無論是不是 ts 架構，都可以正常使用
<template>
<div class="home">
<!-- swiper1 -->
<div class="title">基本效果-小圓點和左右切換</div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
<div class="swiper-button-next"></div>
<!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
</div>
</div>
<!-- swiper2 -->
<div class="title">切換效果-effect</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
</div>
</div>
<!-- swiper3 -->
<div class="title">切換效果-cube</div>
<div class="swiper-container swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
</div>
</div>
</template>
<script >
import { defineComponent, onMounted } from "vue";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
// swiper-bundle.min.css 決定了小圓點和左右翻頁標簽，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 決定了基礎的樣式
import "swiper/swiper.min.css";
export default defineComponent({
name: "Home",
components: {},
setup() {
onMounted(() => {
new Swiper(".swiper1", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on: {
navigationShow: function () {
console.log("按鈕顯示了");
},
},
});
new Swiper(".swiper2", {
//循環
loop: true,
//每張播放時長3秒，自動播放
spaceBetween: 25,
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: 1.32,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
});
new Swiper(".swiper3", {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
effect: "cube",
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6,
},
});
});
},
});
</script>
<style scoped>
.title {
text-align: center;
line-height: 50px;
}
.swiper-slide img {
width: 100%;
}
</style>
三、使用的框架 vue2 + ts + swiper6 （同樣兼容 ts 項目，無需特殊處理）
<template>
<div class="home">
<!-- swiper1 -->
<div class="title">基本效果-小圓點和左右切換</div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/sw1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw3.jpg" alt="" />
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
<div class="swiper-button-next"></div>
<!--右箭頭。如果放置在swiper-container外面，需要自定義樣式。-->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
// swiper-bundle.min.css 決定了小圓點和左右翻頁標簽，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 決定了基礎的樣式
import "swiper/swiper.less";
export default {
name: '',
data() {
return {};
},
mounted() {
// 如果為異步獲取數據，需要給標簽添加 v-if ，在數據獲取到的回調中，如 ajax 的回調中 調用初始化 initSwiper 方法，且v-if 為 true；
// vue3 獲取異步數據同理；
// 需要使用 this.$nextTick
// 例：
setTimeout(()=>{
this.$nextTick(() => {
this.initSwiper();
);
})
},
methods: {
initSwiper(){
new Swiper('.swiper1', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
on: {
navigationShow: function () {
console.log('按鈕顯示了');
},
},
});
}
},
};
</script>
<style lang="less" scoped>
.title {
text-align: center;
line-height: 50px;
}
.swiper-slide {
img {
width: 100%;
}
}
</style>
四、使用的框架 react17 + swiper6 （同樣兼容 ts 項目，無需特殊處理）
直接引入css會報錯，我安裝的 swiper8.0.6 版本，如圖所示
微信截圖_20220225152340.png
查看相應報錯、ERROR in ./src/App.js 6:0-38
Module not found: Error: Package path ./swiper-bundle.min.css is not exported from package D:\codeWork\swiper\swiperreact\node_modules\swiper (see exports field in D:\codeWork\swiper\swiperreact\node_modules\swiper\package.json)
說是package.json沒有導出相應的包，當然、這個錯誤在vue中是沒有的，那么我們就打開swiper的package.json、如圖所示
微信截圖_20220225154129.png
很明顯，已經導出來了，只是引入的包的名稱需要變一下，代碼如下：
import './App.css';
// swiper-bundle.min.css 決定了小圓點和左右翻頁標簽，如果不需要可以不引用
import "swiper/css/bundle";
// swiper.less/sass/css 決定了基礎的樣式
import "swiper/css";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
function App() {
new Swiper(".swiper1", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on: {
navigationShow: function () {
console.log("按鈕顯示了");
},
},
});
return (
<div className="App">
<div className="home">
<div className="title">基本效果-小圓點和左右切換</div>
<div className="swiper-container swiper1">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src={require("./assets/1.png")} alt="" />
</div>
<div className="swiper-slide">
<img src={require("./assets/2.png")} alt="" />
</div>
<div className="swiper-slide">
<img src={require("./assets/3.png")} alt="" />
</div>
</div>
<div className="swiper-pagination"></div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
</div>
</div>
);
}
export default App;
五、需要哪些模塊，直接去定義文件里面找，按住ctro 鼠標放在 swiper 上，直接就跳轉到swiper.d.ts中；
微信截圖_20210326104455.png
引入相應的模塊后，可以參照官網文檔設計想要的效果，和之前的使用方式一樣；
完成，如果有全局引入的方式，還求大神們指點，不勝感激；
