vue2中如何使用swiper@5.4.5

更新時(shí)間：2023年12月14日 15:40:15 作者：新生代農(nóng)民工官方認(rèn)證碼農(nóng)小拽

這篇文章主要介紹了vue2中如何使用swiper@5.4.5問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

版本說(shuō)明

about vue:

由于當(dāng)前主流仍是vue2，所以本次使用vue2版本。
在博文最后，也會(huì)說(shuō)明vue3版本的使用。

about swiper:

當(dāng)前swiper已經(jīng)到了7版本。
6版本及以上，已經(jīng)支持了直接在前端框架中的使用。
6以下版本，不支持直接在前端框架中使用。
也就是說(shuō)， 6以下版本，沒有swiper-vue.js

about jquery:

由于使用swiper使用了固定的html內(nèi)容，所以需要在html文件加載后，
才能使用swiper插件。
所以我們需要把配置內(nèi)容，放在mounted里面：

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意這里的引入

export default {
    name: 'CarouselShow',
    mounted() {
        new Swiper('.swiper-container', {
            autoplay: true,
            loop: true,
            // 其他配置...
        })
    }
}
</script>

用前準(zhǔn)備

默認(rèn)已經(jīng)使用vue2創(chuàng)建了項(xiàng)目，此時(shí)需要安裝一些js庫(kù)：

yarn add swiper@5.4.5 // 注意版本，后面會(huì)介紹為啥選5.4.5

swiper的使用方法：

https://www.swiper.com.cn/usage/index.html

使用的時(shí)候，需要從這里拿基礎(chǔ)代碼。

代碼案例：

https://gitee.com/guozia007/test-swiper5.45

效果展示：

https://guozia007.gitee.io/test-swiper5.45/

swiper的api配置項(xiàng)：

https://www.swiper.com.cn/api/

使用swiper

此處直接在vue2給的HelloWord組件上進(jìn)行修改，把原有代碼都刪除，換成

給定的代碼，即：

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">Slide 3</div>
        </div>
        <!-- 如果需要分頁(yè)器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要導(dǎo)航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意這里的引入

export default {
    name: 'HelloWorld',
    mounted() {
		var mySwiper = new Swiper('.swiper-container', {
			// config...
		})
	}
}
</script>

<style scoped>
.swiper-container {
    width: 500px;
    height: 400px;
}
.swiper-slide {
    text-align: center;
    line-height: 400px;
    color: #b0b0b0;
}
.swiper-slide1 {
    background: red;
}

.swiper-slide2 {
    background: blue;
}

.swiper-slide3 {
    background: yellow;
}
</style>

此時(shí)，已經(jīng)能用了。

然后是各種api的配置，根據(jù)自己的需要，來(lái)選擇不同的配置項(xiàng)。

主要配置項(xiàng)

loop

無(wú)限循環(huán)，即輪播到最后一張圖之后，點(diǎn)擊按鈕，是否接著輪播第一張圖。

默認(rèn)為false 。表示不循環(huán)，即播放了最后一張，點(diǎn)擊按鈕無(wú)效，不會(huì)去播放第一張圖片。

設(shè)置為true，播放到最后一張，點(diǎn)擊按鈕后，會(huì)繼續(xù)播放第一張。

loop: true,

speed

speed: 800, // 滾動(dòng)一張或者切換一張圖片，需要的時(shí)間，單位ms，默認(rèn)300ms

pagination

設(shè)置輪播圖中的小圓點(diǎn)

pagination: {
  el: '.swiper-pagination',
},

配合著標(biāo)簽使用：

<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>

輪播的圖片有幾張，就會(huì)出現(xiàn)幾個(gè)小圓點(diǎn)。

navigation

配置左右按鈕

// 如果需要前進(jìn)后退按鈕
navigation: {
  nextEl: '.swiper-button-next', // 右按鈕
  prevEl: '.swiper-button-prev', // 左按鈕
},

配合標(biāo)簽使用：

<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

effect

改變輪播圖的效果

默認(rèn)是一張一張的滑動(dòng)輪播，

比如設(shè)置fade時(shí)，就可以讓圖片變成淡入淡出的方式進(jìn)行輪播。

更多值可以查看api配置項(xiàng)。

autoplay

配置輪播圖的自動(dòng)播放功能，即用戶不需要點(diǎn)擊，輪播圖會(huì)自動(dòng)切換圖片

該屬性有兩種配置方式：

第一種是直接配置boolean值，即false或者true。

默認(rèn)為true，即不自動(dòng)播放。

如果配置為true，就會(huì)自動(dòng)播放。

autoplay: true,

該配置相當(dāng)于：

autoplay: {
  delay: 3000, // 每次輪播間隔的ms數(shù)，默認(rèn)3000ms
  stopOnLastSlide: false, // 播放完最后一張圖片后是否停留在最后一張圖片上，停止繼續(xù)輪播。默認(rèn)false
  disableOnInteraction: true, // 用戶操作輪播圖后，比如點(diǎn)擊輪播按鈕或小圓點(diǎn)，停止輪播
}

第二種配置方法：

autoplay: {
  delay: 3000, // 每次輪播間隔的ms數(shù)，默認(rèn)3000ms
  stopOnLastSlide: false, // 播放完最后一張圖片后是否停留在最后一張圖片上，停止繼續(xù)輪播。默認(rèn)false
  disableOnInteraction: true, // 用戶操作輪播圖后，比如點(diǎn)擊輪播按鈕或小圓點(diǎn)，停止自動(dòng)輪播
}

其中，

stopOnLastSlide設(shè)置為true，播放完最后一張，會(huì)停止播放
disableOnInteraction 設(shè)置為false，用戶操作輪播圖后，不會(huì)停止自動(dòng)輪播。

即：

autoplay: {
  delay: 3000, // 每次輪播間隔的ms數(shù)，默認(rèn)3000ms
  stopOnLastSlide: false, // 播放完最后一張圖片后繼續(xù)輪播
  disableOnInteraction: false, // 用戶操作輪播圖后，比如點(diǎn)擊輪播按鈕或小圓點(diǎn)，繼續(xù)自動(dòng)輪播
}

修改swiper中輪播圖的樣式

直接按照類名修改相應(yīng)css屬性即可。

比如設(shè)置寬高：

.swiper {
  width: 500px;
  height: 400px;
}

需要注意的是，如果原來(lái)的swiper類中，已經(jīng)設(shè)置了某個(gè)屬性，

但是新屬性中又不需要這個(gè)屬性，就可以按照下面的例子來(lái)處理：

假定原來(lái)的.swiper默認(rèn)樣式：

.swiper {
  left: 0;
}

假定我們此時(shí)不需要這個(gè)left屬性，而是我們要自己定義一個(gè)right屬性：

.swiper {
  left: unset;
  right: 10px;
}

修改小圓點(diǎn)樣式

如果只修改小圓點(diǎn)顏色的話，

可以用

--swiper-pagination-color: #fff;

屬性去修改小圓點(diǎn)顏色。

該屬性不管style標(biāo)簽里有沒有scoped屬性，都會(huì)生效。

需要特別注意的是，在vue中，如果通過(guò)類名修改小圓點(diǎn)樣式，

<style></style>這里面不能加scoped屬性，

不然無(wú)法修改小圓點(diǎn)樣式。

修改小圓點(diǎn)的樣式，需要單獨(dú)寫一個(gè)不帶scoped屬性的標(biāo)簽。這樣才能確保新樣式生效。

比如就像這樣：

<style lang="less" scoped>
/*這里是其他標(biāo)簽的樣式*/
</style>

<style lang="less">
/*小圓點(diǎn)的樣式，需要單獨(dú)寫一個(gè)不帶scoped屬性的style標(biāo)簽*/
.swiper-pagination-bullet {
    margin-left: 5px;

    &.swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
}
</style>

得到的效果就是這樣的：

在這里插入圖片描述

分頁(yè)小圓點(diǎn)的相關(guān)配置項(xiàng)：

官方文檔：https://www.swiper.com.cn/api/pagination/362.html

// 配置項(xiàng)
pagination: {
  el: '.swiper-pagination', // 包裹小圓點(diǎn)的類名，可自定義
  clickable: true, // 點(diǎn)擊小圓點(diǎn)，也可以滾動(dòng)輪播圖。默認(rèn)false
  type: 'bullets', // 分頁(yè)器樣式類型，默認(rèn)bullets 圓點(diǎn)樣式
  bulletElement: 'span', // 設(shè)置小圓點(diǎn)的標(biāo)簽，默認(rèn)為span
  bulletClass: 'dot', // 修改小圓點(diǎn)類名，默認(rèn)為swiper-pagination-bullet。
  // 如果修改了該類名，就要自己寫相應(yīng)的樣式了
  bulletActiveClass: 'active', // 修改小圓點(diǎn)處于激活狀態(tài)時(shí)的類名，默認(rèn)為swiper-pagination-bullet-active
}

swiper7的使用

swiper7在vue3中使用。

安裝：

yarn add swiper

swiper7不能在vue2中使用，

原因是，在swiper源碼中，引入的8個(gè)vue方法都是vue3中的方法，在vue2中不存在。

如果在vue2中使用swiper7，會(huì)報(bào)錯(cuò)。

另外，vue3中使用swiper7，會(huì)有路徑上的坑。

比如引入時(shí)，需要自己修改引入路徑，不然會(huì)報(bào)錯(cuò)。

依照官方文檔的引入方法為：

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

而這樣的引入方式，vue會(huì)報(bào)錯(cuò)找不到引入的模塊，

解決方法是，手動(dòng)修改引入路徑，

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

  // Import Swiper styles
  import 'swiper/swiper.min.css';

正因?yàn)橛羞@種坑，所以首選仍是6版本之前的swiper版本。

而6以前的最后一個(gè)穩(wěn)定版本就是5.4.5版本。也無(wú)需擔(dān)心這種坑的問(wèn)題。