swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法
更新時間：2018年09月15日 09:46:55 作者：小問_
今天小編就為大家分享一篇swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
長話短說，在vue(2.5.x)中使用swiper(4.3.3)，輪播加了autoplay和loop、observer、observeParents等參數(shù)還是很詭異的無法循環(huán)輪播；
那么可以這樣寫代碼試試：
this.$api.queryImages().then((resp) => {
if(resp && resp.data.resultCode == "0"){
this.swiperImgs = resp.data.data;
this.$nextTick(() => { // 下一個UI幀再初始化swiper
this.initSwiper();
});
}
})
是的，關鍵就在于上面這個初始化swiper的調用了，一般會用v-for循環(huán)渲染，然后馬上初始化swiper，但是這樣可能導致初始化時v-for還沒渲染完畢，所以可能swiper錯亂， 那么swiper放在$nextTick下一個UI幀再初始化，保證了v-for已經完成循環(huán)。
initSwiper() {
if (this.swiper != null) return;
this.swiper = new Swiper('.swiper-container', {
loop: true,
speed: 900,
autoplay: {
delay: 3000, //3秒切換一次
disableOnInteraction: false
},
observer: true,//修改swiper自己或子元素時，自動初始化swiper
observeParents: true,//修改swiper的父元素時，自動初始化swiper
pagination: {
el: '.swiper-pagination',
// dynamicBullets: true,
}
});
}
以上這篇swiper在vue項目中l(wèi)oop循環(huán)輪播失效的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
element-plus結合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手試一試2023-10-10
vue前端自適應布局實現(xiàn)教程(一步到位所有自適應)
?自適應布局是一種根據(jù)不同的設備屏幕分辨率進行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關于vue前端自適應布局實現(xiàn)的相關資料,需要的朋友可以參考下2024-08-08
計算屬性和普通屬性一樣是在模板中綁定計算屬性的，當data中對應數(shù)據(jù)發(fā)生改變時，計算屬性的值也會發(fā)生改變。下面這篇文章主要給大家介紹了關于Vue中計算屬性computed的相關資料，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了如何利用vue3定制復雜組件的滾動條，文中通過示例代碼講解詳細，需要的朋友們下面就跟隨小編來一起學習學習吧2023-04-04
今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果，同時支持滑動連線和點擊連線，感興趣的可以了解一下2023-01-01
這篇文章主要為大家詳細介紹了Vue的生命周期，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細介紹了vue中axios的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue中如何下載excel流文件及設置下載文件名，對vue感興趣的同學，可以參考下2021-05-05