vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
更新時間：2018年07月03日 09:10:08 作者：Mythsool
這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
本人第一次使用vue awesome。
踩到的坑確實不少。官網(wǎng)上面的用法寫的很簡單，按照上面做法基本會遇到如下這個問題
輪播第二次之后，首屏?xí)詣犹^
網(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組件中
圖中標(biāo)紅就是解決辦法，因為swiper需要在數(shù)據(jù)加載之后初始化，但是vue swiper暫時并沒有提供這個方法（也有可能是我不知道這個方法）所以當(dāng)數(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)文章
因為項目中需要根據(jù)后端返回的權(quán)限進行功能的顯示隱藏，所以就加了個權(quán)限指令。不用寫if else進行判斷，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了vue2.0實現(xiàn)檢測無用的代碼并刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02
Vue3中各種靈活傳遞數(shù)據(jù)的方式小結(jié)
Vue 3 提供了多種數(shù)據(jù)傳遞的方式,讓我們的組件之間可以盡情地交流,接下來,我們就直接一個個來看,這些方式都是怎么工作的,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補充介紹了vue通過jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)日歷小插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
路由攔截是一種在用戶訪問特定頁面之前對其進行攔截和處理的機制,下面這篇文章主要給大家介紹了關(guān)于vue前端img訪問鑒權(quán)后端進行攔截的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue進階構(gòu)造屬性，從4個方面來進行講解：Directive、Mixin 混入、Extends 繼承、provide 和 inject，感興趣的小伙伴們，趕快來看一下2021-05-05