vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題

更新時(shí)間：2018年07月03日 09:10:08 作者：Mythsool

這篇文章主要介紹了vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

本人第一次使用vue awesome。

踩到的坑確實(shí)不少。官網(wǎng)上面的用法寫的很簡單，按照上面做法基本會遇到如下這個(gè)問題

輪播第二次之后，首屏?xí)詣犹^

網(wǎng)上找了很多資料，都不能解決這個(gè)問題。于是自己琢磨了很久終于靈光一閃。一個(gè)小技巧解決了這個(gè)問題。

使用方法應(yīng)該很簡單，去官網(wǎng)可以查看到方法?；静襟E如下

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)紅就是解決辦法，因?yàn)閟wiper需要在數(shù)據(jù)加載之后初始化，但是vue swiper暫時(shí)并沒有提供這個(gè)方法（也有可能是我不知道這個(gè)方法）所以當(dāng)數(shù)據(jù)加載之后

這樣即可解決首屏的問題！

下面貼上配置的代碼

swiperOption:{
    loop:true,
    notNextTick: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction:false,
    observer:true,//修改swiper自己或子元素時(shí)，自動初始化swiper
    observeParents:true,//修改swiper的父元素時(shí)，自動初始化swiper
    paginationClickable: true,
    autoplay : {
     delay:3000
    },
    observer:true,
    speed:300,
    pagination: {
     el: '.swiper-pagination',
     clickable: true
    }

再一個(gè)就是app中觸屏滑動之后不能自動輪播的bug問題，已解決下面貼圖

將disableOnInteraction設(shè)置為false即可

總結(jié)

以上所述是小編給大家介紹的vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue集成阿里云做滑塊驗(yàn)證的實(shí)踐
滑塊驗(yàn)證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗(yàn)證，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-01-01
Vue3使用ECharts實(shí)現(xiàn)?；鶊D的代碼示例
?；鶊D是一種用于直觀顯示流向數(shù)據(jù)的可視化工具,特別適合展示復(fù)雜的網(wǎng)絡(luò)關(guān)系和資源流動,在前端項(xiàng)目中,通過結(jié)合?Vue?3?和?ECharts,可以快速實(shí)現(xiàn)交互性強(qiáng)、樣式美觀的桑基圖,本文將通過完整的代碼示例,帶你一步步完成一個(gè)?；鶊D的實(shí)現(xiàn),需要的朋友可以參考下
2025-01-01
解決vue組件沒顯示,沒起作用,沒報(bào)錯(cuò),但該顯示的組件沒顯示問題
這篇文章主要介紹了解決vue組件沒顯示,沒起作用,沒報(bào)錯(cuò),但該顯示的組件沒顯示問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目查看vue版本及cli版本的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
本文主要介紹了vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue+express+jwt持久化登錄的方法
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue.js 和 MVVM 的注意事項(xiàng)
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧
2016-11-11
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
vue如何添加數(shù)組頁面及時(shí)顯示
這篇文章主要介紹了vue如何添加數(shù)組頁面及時(shí)顯示，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue?contextmenujs鼠標(biāo)右鍵菜單高度不夠顯示不全的問題及解決方法
這篇文章主要介紹了使用vue-contextmenujs鼠標(biāo)右鍵菜單時(shí)，當(dāng)高度不夠時(shí)顯示不全的問題,大家需要注意本文給提供的解決方案雖然能夠解決現(xiàn)有問題，但是如果組件升級了，想要使用最新升級后的組件，還要再次修改代碼，需要的朋友可以參考下
2022-07-07