swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法

更新時(shí)間：2018年09月15日 09:46:55 作者：小問_

今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

長話短說，在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(() => { // 下一個(gè)UI幀再初始化swiper
  this.initSwiper();
  });
 }
})

是的，關(guān)鍵就在于上面這個(gè)初始化swiper的調(diào)用了，一般會(huì)用v-for循環(huán)渲染，然后馬上初始化swiper，但是這樣可能導(dǎo)致初始化時(shí)v-for還沒渲染完畢，所以可能swiper錯(cuò)亂，那么swiper放在$nextTick下一個(gè)UI幀再初始化，保證了v-for已經(jīng)完成循環(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自己或子元素時(shí)，自動(dòng)初始化swiper
   observeParents: true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
 
   pagination: {
   el: '.swiper-pagination',
   // dynamicBullets: true,
   }
  });
  }

以上這篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試
2023-10-10
vue前端自適應(yīng)布局實(shí)現(xiàn)教程(一步到位所有自適應(yīng))
?自適應(yīng)布局是一種根據(jù)不同的設(shè)備屏幕分辨率進(jìn)行布局的方式,它為不同的屏幕分辨率定義了不同的布局,下面這篇文章主要給大家介紹了關(guān)于vue前端自適應(yīng)布局實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2024-08-08
Vue中計(jì)算屬性computed的示例解讀
計(jì)算屬性和普通屬性一樣是在模板中綁定計(jì)算屬性的，當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性的值也會(huì)發(fā)生改變。下面這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性computed的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
基于Vue3定制復(fù)雜組件滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了如何利用vue3定制復(fù)雜組件的滾動(dòng)條，文中通過示例代碼講解詳細(xì)，需要的朋友們下面就跟隨小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能
今天用vue來實(shí)現(xiàn)一個(gè)分頁組件，總體來說，vue實(shí)現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁組功能，感興趣的朋友跟隨小編一起看看吧
2018-11-11
vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解
這篇文章主要為大家介紹了vue+three.js實(shí)現(xiàn)炫酷的3D登陸頁面示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue+jsPlumb實(shí)現(xiàn)連線效果(支持滑動(dòng)連線和點(diǎn)擊連線)
jsPlumb 是一個(gè)比較強(qiáng)大的繪圖組件，它提供了一種方法，主要用于連接網(wǎng)頁上的元素。本文將利用jsPlumb實(shí)現(xiàn)連線效果，同時(shí)支持滑動(dòng)連線和點(diǎn)擊連線，感興趣的可以了解一下
2023-01-01
一起來學(xué)習(xí)Vue的生命周期
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue中axios的使用詳解
這篇文章主要為大家詳細(xì)介紹了vue中axios的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
vue中如何下載excel流文件及設(shè)置下載文件名
這篇文章主要介紹了vue中如何下載excel流文件及設(shè)置下載文件名，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05