如何解決vue awesome swiper非同步載入資料出現的bug問題

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

本人第一次使用vue awesome。

踩到的坑確實不少。官網上面的用法寫的很簡單，按照上面做法基本上會遇到如下這個問題

輪播第二次之後，首屏會自動跳過

#網路上找了很多資料，都不能解決這個問題。於是自己琢磨了很久終於靈光一閃。一個小技巧解決了這個問題。

使用方法應該很簡單，去官網可以查看到方法。基本步驟如下

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需要在資料載入之後初始化，但vue swiper暫時並沒有提供這個方法（也有可能是我不知道這個方法）所以當資料載入之後

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

下面貼上配置的程式碼

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設定為false即可

##以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

Vue中使用Echarts的兩種方式的介紹

關於VUE中常用的幾種import（模組、檔案）引入方式的介紹

以上是如何解決vue awesome swiper非同步載入資料出現的bug問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！