vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
更新時間：2018年07月03日 09:10:08 作者：Mythsool
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
本人第一次使用vue awesome。
踩到的坑確實不少。官網(wǎng)上面的用法寫的很簡單，按照上面做法基本會遇到如下這個問題
輪播第二次之后，首屏會自動跳過
網(wǎng)上找了很多資料，都不能解決這個問題。于是自己琢磨了很久終于靈光一閃。一個小技巧解決了這個問題。
使用方法應(yīng)該很簡單，去官網(wǎng)可以查看到方法。基本步驟如下
npm install vue-awesome-swiper --save-dev
在main.js中
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
在vue組件中
圖中標紅就是解決辦法，因為swiper需要在數(shù)據(jù)加載之后初始化，但是vue swiper暫時并沒有提供這個方法（也有可能是我不知道這個方法）所以當數(shù)據(jù)加載之后
這樣即可解決首屏的問題！
下面貼上配置的代碼
swiperOption:{
loop:true,
notNextTick: true,
mousewheelControl: true,
autoplayDisableOnInteraction:false,
observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper
paginationClickable: true,
autoplay : {
delay:3000
},
observer:true,
speed:300,
pagination: {
el: '.swiper-pagination',
clickable: true
}
再一個就是app中觸屏滑動之后不能自動輪播的bug問題，已解決下面貼圖
將disableOnInteraction設(shè)置為false即可
總結(jié)
以上所述是小編給大家介紹的vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
滑塊驗證是比較常見的人機鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗證，具有一定的參考價值，感興趣的可以了解一下2022-01-01
Vue3使用ECharts實現(xiàn)?；鶊D的代碼示例
?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動,在前端項目中,通過結(jié)合?Vue?3?和?ECharts,可以快速實現(xiàn)交互性強、樣式美觀的?；鶊D,本文將通過完整的代碼示例,帶你一步步完成一個?；鶊D的實現(xiàn),需要的朋友可以參考下2025-01-01
解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題
這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報錯,但該顯示的組件沒顯示問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue項目查看vue版本及cli版本的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3+ts+elementPLus實現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實現(xiàn)v-preview指令，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，Vue.js 是一個提供 MVVM 風格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項，感興趣的朋友一起看看吧2016-11-11
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了vue如何添加數(shù)組頁面及時顯示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue?contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標右鍵菜單時，當高度不夠時顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，需要的朋友可以參考下2022-07-07