Vue使用Swiper封裝輪播圖組件的方法詳解
更新時(shí)間：2022年09月05日 17:10:28 作者：chyeonL
Swiper是一個(gè)很常用的用于實(shí)現(xiàn)各種滑動(dòng)效果的插件，PC端和移動(dòng)端都能很好的適配。本文將利用Swiper實(shí)現(xiàn)封裝輪播圖組件，感興趣的可以了解一下
Swiper
Swiper是一個(gè)很常用的用于實(shí)現(xiàn)各種滑動(dòng)效果的插件，PC端和移動(dòng)端都能很好的適配。
官網(wǎng)地址：www.swiper.com.cn/
目前最新版本是Swiper7，但眾所周知最新版本通常不穩(wěn)定，所以這里使用Swiper6來(lái)封裝。
Swiper各版本區(qū)別：
為什么要封裝組件
因?yàn)榫W(wǎng)頁(yè)中通常不止一個(gè)地方需要用到輪播圖，所以直接將輪播圖封裝成一個(gè)共用組件，性能會(huì)更好，修改起來(lái)也可以快速找到位置。
開(kāi)始封裝
1.下載安裝Swiper
npm install Swiper@6 // @6 是指定版本號(hào)為6 的意思 cnpm install Swiper@6 yarn add Swiper@6
2.引入css樣式文件
import "swiper/swiper-bundle.min.css";
3.引入js文件
import Swiper from 'swiper/swiper-bundle'
4.把官網(wǎng)使用方法中的HTML結(jié)構(gòu)復(fù)制粘貼過(guò)來(lái)
注意：
- 下面不是官網(wǎng)使用文檔的代碼，是我改動(dòng)過(guò)的！
- 這里的頂層容器類(lèi)名，不對(duì)應(yīng)的話(huà)，后面出大問(wèn)題?。?！
這里官網(wǎng)的使用方法上的容器類(lèi)名是swiper，對(duì)應(yīng)Swiper7。
但因?yàn)檫@里我下載的是Swiper6，所以我改成了它對(duì)應(yīng)的容器類(lèi)名swiper-container。
Swiper6及其以前的版本都是對(duì)應(yīng)類(lèi)名swiper-container
// 注意這里容器的類(lèi)名??！
<div class="swiper-container" ref='Carousel'>
<div class="swiper-wrapper">
//v-for循環(huán)生成輪播圖片
<div class="swiper-slide" v-for="Carousel in list" :key="Carousel.id">
<img :src="Carousel.imgUrl" />
</div>
</div>
<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動(dòng)條 -->
<div class="swiper-scrollbar"></div>
</div>5.初始化Swiper
初始化時(shí)間：有圖片數(shù)據(jù)后
但是輪播圖的圖片通常都是從后臺(tái)獲取回來(lái)的，需要確定頁(yè)面有數(shù)據(jù)并且DOM結(jié)構(gòu)完全生成后，再初始化。所以最好的方法是： watch監(jiān)聽(tīng) + $nextTick
$nextTick: 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。
原理：watch監(jiān)聽(tīng)圖片數(shù)據(jù)的變化，$nextTick等到DOM結(jié)構(gòu)完全生成后，立即初始化
watch: {
//list是輪播圖數(shù)據(jù)
list: {
immediate: true, //頁(yè)面初始化的時(shí)候就調(diào)用一次handler()
handler() {
this.$nextTick(() => {
var mySwiper = new Swiper(this.$refs.Carousel, {
direction: "horizontal", // 水平切換選項(xiàng)
loop: true, // 循環(huán)模式選項(xiàng)
// 如果需要分頁(yè)器
pagination: {
el: ".swiper-pagination",
clickable: true, //可點(diǎn)擊
type: "bullets", //默認(rèn)樣式 小圓點(diǎn), 還可選其他形狀
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
},
},
}自定義效果
- 上面的樣式結(jié)構(gòu)是我自定義過(guò)的，不是原本的官方使用文檔，初次使用建議先復(fù)制官網(wǎng)的看看
- 如果不需要按鈕/分頁(yè)器/滾動(dòng)欄，可以自己在HTML結(jié)構(gòu)和初始化代碼中刪減
- 如果想要其他的滑動(dòng)效果，可以看看官網(wǎng)其他示例進(jìn)行選擇
- 如果想要改變具體樣式或者配置，可以看看官方API
完整代碼
封裝的組件名叫Carousel
<template>
<div class="swiper-container" ref='Carousel'>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="Carousel in list" :key="Carousel.id">
<img :src="Carousel.imgUrl" />
</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>
// 引入swiper的js
import Swiper from "swiper/swiper-bundle.js";
import "swiper/swiper-bundle.min.css";
export default {
name: "Carousel",
props: ["list"],
watch: {
list: {
immediate: true,
handler() {
this.$nextTick(() => {
var mySwiper = new Swiper(this.$refs.Carousel, {
direction: "horizontal", // 垂直切換選項(xiàng)
loop: true, // 循環(huán)模式選項(xiàng)
// 如果需要分頁(yè)器
pagination: {
el: ".swiper-pagination",
clickable: true,
type: "bullets",
},
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
},
},
},
};
</script>
<style></style>
效果展示
到此這篇關(guān)于Vue使用Swiper封裝輪播圖組件的方法詳解的文章就介紹到這了,更多相關(guān)Vue Swiper封裝輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue之Element-Ui輸入框顯示與隱藏方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了解決vuecli3中img src 的引入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了Vue js生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式
這篇文章主要介紹了Vue如何使用百度地圖自定義信息窗口InfoWindow的樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能
最近做的項(xiàng)目用到了全選全不選功能，于是我就自己動(dòng)手寫(xiě)了一個(gè)，基于vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能，具體實(shí)例代碼大家參考下本文2018-07-07
我們?cè)赩ue.js項(xiàng)目中經(jīng)常需要引用圖片,所以下面這篇文章主要介紹了關(guān)于在Vue頁(yè)面中如何更優(yōu)雅地引入圖片的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局的實(shí)現(xiàn)
這篇文章主要介紹了從零開(kāi)始在vue-cli4配置自適應(yīng)vw布局，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
筆者這篇文章會(huì)從vue3基礎(chǔ)的知識(shí)點(diǎn)開(kāi)始剖析，特別是在將composition?API的時(shí)候，在代碼示例中不會(huì)一上來(lái)就使用setup語(yǔ)法糖，而是用早期的setup函數(shù)，這樣方便于初學(xué)的小伙伴們理解跟學(xué)習(xí)2022-08-08
這篇文章介紹了VUE中template的三種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue源碼之首次渲染過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02