如何解決vueawesomeswiper異步加載數據出現的bug問題

來源：懂視網責編：小采時間：2020-11-27 19:34:23

如何解決vueawesomeswiper異步加載數據出現的bug問題

如何解決vueawesomeswiper異步加載數據出現的bug問題:這篇文章主要介紹了vue awesome swiper異步加載數據出現的bug問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下本人第一次使用vue awesome。踩到的坑確實不少。官網上面的用法寫的很簡單，按照上面做法基本會遇到如下這個問題輪

推薦度：

點擊下載本文 文檔為doc格式

導讀如何解決vueawesomeswiper異步加載數據出現的bug問題:這篇文章主要介紹了vue awesome swiper異步加載數據出現的bug問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下本人第一次使用vue awesome。踩到的坑確實不少。官網上面的用法寫的很簡單，按照上面做法基本會遇到如下這個問題輪

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

本人第一次使用vue awesome。

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

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

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

使用方法應該很簡單，去官網可以查看到方法?；静襟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組件中

圖中標紅就是解決辦法，因為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問題，已解決下面貼圖