vue中動態新增swiper,滑動效果不起作用

2021-08-20 09:13:05 字數 670 閱讀 5628

vue中動態新增swiper,滑動效果不起作用

在頁面開發過程中,slide的資料經常是需要動態獲取然後賦值,但這個時候dom已經渲染完成,所以,頁面上的slide並沒有更新

碰到這個問題的小夥伴,看來還是沒把swiper深究。

其實swiper的開發者早就想到這個問題了,有時間可以看下swiper的開發文件:  

observer(監視器):

這個屬性裡面有兩個方法:observer 

啟動動態檢查器(ob/觀眾/**者),當改變swiper的樣式(例如隱藏/顯示)或者修改swiper的子元素時,自動初始化swiper 

observeparents  

將observe應用於swiper的父元素。當swiper的父元素變化時,例如window.resize,swiper更新

上面是官方文件的解釋;相信現在大家應該都有解決方案了

下面回到正題,解決剛開始說的那個問題,在vue中使用swiper,資料渲染成功後,滑動效果不起作用:

首先,把初始化swiper放在資料獲取成功之後; 然後開啟

observer:true,    

observeparents:true,

實時監聽swiper的子元素的變化

var swiper = new swiper(this.$refs.swiper1, );

vue動態渲染swiper問題

使用vue控制是否顯示swiper的某個slide,出現swiper不顯示,以及pagination聯動失效等問題。myswiperpagination class swiper pagination div myswiper class swiper container style width 1...

vue中修改swiper樣式

vue單檔案元件中無法修改swiper樣式。1,單檔案元件中 新增乙個style 不加scoped 讓它最終成為全域性樣式。只在其中操作swiper的樣式。專案中多次使用swiper 的話 就給swiper container 新增特定classname作為區分。2,新建專用於操作swiper 樣式...

vue動態發布到線上 在vue中動態新增商品SKU

新增商品規格列表 init elsereturn false else this.creat table creat table 開始生成 if bcheck 結束建立table表 arraycolumn.pop 刪除陣列中最後一項 合併單元格 table mergecell else functi...