在官網找了個功能比較全的代碼作為例子，如下
<template> <swiper :modules="modules" :slides-per-view="3" :space-between="50" navigation :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide></swiper> </template> <script> // import Swiper core and required modules import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from 'swiper/vue'; // Import Swiper styles import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/scrollbar'; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log('slide change'); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y], }; }, }; </script>
我們把它拷到App.vue中全部替換掉之后執行，你會發現報css依賴不存在的錯誤，
我們打開node_modules文件夾，找到swiper文件夾，你會發現這下路徑指向都是不明確的，所以接下來們要手動修改一下路徑，
把js的路徑換成vue文件夾下的swiper-vue.js
默認基礎樣式用swiper目錄下的swiper.min.css或如果嫌麻煩可以直接用總樣式，在swiper目錄下的swiper-bundle.css或者壓縮版swiper-bundle.min.css，
接着我們打開modules目錄，把用到的組件路徑都改一下，然后久違的綠它色終於出現了
這是因為官方例子里默認一次顯示3個滑塊，而例子只有3個swiper-slide，之后就用省略號了
我們把它改成1並且添加點樣式后看下效果：
最終的代碼：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" navigation :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Navigation, Pagination, Scrollbar, A11y } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/navigation/navigation.min.css"; import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/scrollbar/scrollbar.min.css"; /** * 如果嫌麻煩可以把上面的全部樣式都刪了，直接用總的 * bundle：所有 Swiper 樣式，包括所有模塊樣式（如導航、分頁等） */ // import "swiper/swiper-bundle.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log("slide change"); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y], }; }, }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } </style>
組件樣式修改：
因為vue為了不讓單頁的樣式污染全局，通常會在style標簽加上scoped，這就導致了我們無法替換掉組件的樣式，所以我們可以用::v-deep把樣式拋出去替換到全局的，比方說我們要把swiper的pagination頁面小圓點改成白色，那么樣式就可以這樣寫：
<style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } </style>
當然，有些小伙伴會說我要用 CSS 預處理器，比方說scss，那么就可以用:deep()，這樣寫：
順便提一下，目前vue3中並不支持最新版的sass，我們可以用4.14.1的 node-sass搭配7.3.1的sass-loader使用
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D
<style lang="scss" scoped> .swiper:deep() { .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper-pagination { .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } } } </style>
效果：
關於垂直方向：
關於垂直方向的官方文檔在這：#Vertical，但是目前給的vue的demo代碼竟然還是6.x的，真的是(╯°Д°)╯︵┻━┻。好了，想要把輪播圖設置為垂直方向，要在swiper標簽里加上:direction="'vertical'"，這里注意了，vertical一定要有兩對引號包裹的，不管單引號在里還是外，否則不生效，加了這個參數后你會發現滾動輪播圖時會散架，所以還要給swiper設置實高，非要用百分比的話就在swiper標簽外套一個div，在div里給個實際高度就好，具體看下面代碼：
<template> <swiper :direction="'vertical'" :modules="modules" :pagination="{ clickable: true }" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Pagination] }; }, }; </script> <style scoped> .swiper { height: 100vh; } .swiper-slide { height: 100%; line-height: 100vh; font-size: 30px; text-align: center; background-color: skyblue; } </style>
效果：
關於自動播放：
自動播放引入一下Autoplay 模塊就好，沒什么大問題。
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" :autoplay="{delay: 2500,disableOnInteraction: false}"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Pagination, Autoplay } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/autoplay/autoplay.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Pagination, Autoplay], }; }, }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: violet; } </style>
效果：
關於無限循環：
需要開啟無限循環的話在swiper標簽上加入:loop="true"參數就可以了，但是你會發現swiper為了銜接多生成的兩個swiper-slide並沒有引用上我們自己設置的樣式：
所以我們用deep處理一下就好:
<template> <swiper :modules="modules" navigation :loop="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Navigation } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/navigation/navigation.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Navigation] }; }, }; </script> <style scoped> .swiper::v-deep .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: lightgreen; } </style>
關於獲取swiper實例：
獲取swiper實例的官方地址：傳送門，官方描述是可以直接useSwiper來使用swiper實例，但是我翻了一遍源碼也沒有看到哪里有拋出useSwiper掛鈎，我感覺被耍了(╯°Д°)╯︵┻━┻，不過還好swiper組件初始化綁定的onSwiper里可以拿到swiper實例，所以我用繼承的方式把swiper實例拋了出去，感覺還行，嗯，先將就着用吧。效果看下圖，試了下slidePrev和slideNext都可以用：
具體代碼：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> <view class="btn-view"> <button @click="slidePrev">slidePrev</button> <button @click="slideNext">slideNext</button> </view> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const useSwiper = () => { }; const onSwiper = (swiper) => { // console.log(swiper); useSwiper.prototype.swiper = swiper }; return { useSwiper: new useSwiper(), onSwiper, modules: [Pagination], }; }, methods: { slidePrev() { console.log(this.useSwiper) this.useSwiper.swiper.slidePrev() }, slideNext() { console.log(this.useSwiper) this.useSwiper.swiper.slideNext() } } }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: beige; } .btn-view { display: flex; justify-content: center; } .btn-view button { margin: 20px; } </style>
獲取swiper實例后跳轉到指定索引：
具體代碼：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> <view class="btn-view"> <button @click="slidePrev">slidePrev</button> <button @click="slideNext">slideNext</button> <button @click="toPage(1)">跳轉到索引</button> </view> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const useSwiper = () => { }; const onSwiper = (swiper) => { // console.log(swiper); useSwiper.prototype.swiper = swiper }; return { useSwiper: new useSwiper(), onSwiper, modules: [Pagination], }; }, methods: { slidePrev() { console.log(this.useSwiper) this.useSwiper.swiper.slidePrev() }, slideNext() { console.log(this.useSwiper) this.useSwiper.swiper.slideNext() }, toPage(index) { // 如果index為1，則跳轉到第三個slide index++ this.useSwiper.swiper.slideTo(index,500) } } }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: beige; } .btn-view { display: flex; justify-content: center; } .btn-view button { margin: 20px; } </style>
轉載自大佬https://blog.csdn.net/weixin_42063951/article/details/121354984