1.引包
說(shuō)明：導(dǎo)入相應(yīng)js引css
import "Swiper" from "swiper"
import "swiper/css/swiper.css";
import "swiper/js/swiper";
?2.結(jié)構(gòu)
說(shuō)明：必要的結(jié)構(gòu)使用；直接封裝成一個(gè)組件?
<template>
<div class="swiper-container" ref="cur">
<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>
3.new Swiper實(shí)例?
說(shuō)明：(頁(yè)面當(dāng)中務(wù)必要有結(jié)構(gòu)）；注釋已經(jīng)寫(xiě)入代碼。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-631176.html
第一：可以解決獲取數(shù)據(jù)在Swiper實(shí)例之前；第二：可以解決v-for遍歷完后在Swiper之前。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-631176.html
import Swiper from "swiper";
export default {
name: "Carousel",
props: ["list"],
// 這樣做的目的是在list屬性發(fā)生變化時(shí)，
// 能夠及時(shí)更新Swiper輪播組件，以保證輪播的內(nèi)容和效果與list屬性的變化保持同步。
watch: {
list: {
immediate: true,
handler(newValue, oldValue) {
// 這里有了數(shù)據(jù)還是不行，v-for有沒(méi)有渲染也是問(wèn)題，不能保證結(jié)構(gòu)是否完成。
// 用于在DOM更新后執(zhí)行回調(diào)函數(shù)。在Vue中，當(dāng)對(duì)數(shù)據(jù)進(jìn)行修改后，DOM并不會(huì)立即更新，而是在下一個(gè)"tick"時(shí)進(jìn)行更新。
// 這個(gè)"tick"是Vue內(nèi)部的更新隊(duì)列，在執(zhí)行用戶邏輯之前進(jìn)行DOM更新。
this.$nextTick(function () {
const mySwiper = new Swiper(this.$refs.cur, {
loop: true,
slidesPerView: "auto",
slidesPerGroupAuto: true,
autoplay: true,
//如果需要分頁(yè)器
pagination: {
el: ".swiper-pagination",
clickable: true,
//如果需要前進(jìn)后退按鈕
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
});
});
},
},
},
};到了這里，關(guān)于vue中swiper輪播圖的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
