Swiper是一個功能豐富的“滑動特效”外掛： 常用的tab切換，banner切換等等，包含各種切換特效，看Demo就非常炫酷。同時，也提供了主流的框架元件版本。然而，最新版的Vue元件只支援在Vue3中使用。查詢資料後實踐，記錄一個Vue2中的使用方式。 Swiper的官網介紹也比較清楚，英文官網中是最新的版本的內容，沒有找到舊版的文件內容，中文官網可以看到舊版的文件。
一、Swiper 在Vue2 中的使用方法
最新的Swiper只支援Vue3，所以在 Vue2上要安裝舊版本
第一步：npm 安裝正確的版本
npm i [email protected] [email protected]
第二步：在對應的Vue頁面中引用庫
這裡其實是使用vue-awesome-swiper庫對swiper的封裝
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// 新增元件
components: {
Swiper,
SwiperSlide,
},第三步：在頁面上使用元件，並對元件新增設定，swiperOption屬性設定見後文
<swiper :options="swiperOption"> <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>
二、Swiper 相關引數和事件(options的配置)
相關引數和事件參考中文網站中舊版api。該文件是Swiper 4.X - 7.X 的api ，但是這裡是[email protected]版本，大部分api是通用的，7上只是略有區別，看文件時注意區分即可。
注意：
該元件事件的監聽有一些坑，透過監聽點選某個slider事件進行說明。
監聽事件可以直接寫在元件的標籤中，如<swiper :options="swiperOption" @tap="test">, 這樣在test方法中就可以收到點選回撥。然而，當我們想獲取點選某個slide時，卻發現在該方法中無法獲取到swiper物件，進而無法使用swiper物件的activeIndex屬性獲取到當前點選的slide位置。
若要想獲取該swiper例項，則需要將監聽配置到on引數中：
swiperOption: {
on: {
// 該方法中的this都指代swiper本身
tap: function () {
console.log('點選的位置', this.activeIndex);
}
}
}注意這裡也不能寫成箭頭函式，會更改this的指向。
三、簡單的例子：中間大兩邊小的輪播
效果如圖：
初始載入
可設定loop屬性讓初始載入即兩邊都有slide，詳見下方程式碼loop屬性註釋
滾動後
完整程式碼如下，主要是配置相關的樣式，具體引數含義註釋在程式碼中了：
<template>
<div>
<div class="swiper">
<swiper :options="swiperOption">
<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>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'Main',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
swiperOption: {
spaceBetween: 30,
slidesPerView: 5, // 一屏顯示的slide個數
centeredSlides: true,// 居中的slide是否標記為active，預設是最左active,這樣樣式即可生效
slideToClickedSlide: true,// 點選的slide會居中
// loop: true,// 迴圈播放, 可有無限滾動效果，初始載入即是滾動後的效果
on: {
// 該方法中的this都指代swiper本身
tap: function () {
console.log('點選的位置', this.activeIndex);
}
}
},
}
},
mounted() {
},
methods: {
test(e) {
// 預設會$event物件
console.log(11,e);
}
},
}
</script>
<style lang="less" scoped>
.swiper {
width: 100%;
height: 50px;
bottom: 10px;
position: absolute;
background-color: darkred;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.5);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
background-color: aqua;
transform: scale(1);
}
</style>版权声明：除非特別標注，否則均為網際整理，轉載時請以連結形式注明文章出處。