vue awesome swiper でのデータの非同期読み込みのバグ問題を解決する方法

この記事では主にvueweasome swiperによるデータの非同期読み込みのバグ問題を詳しく紹介していますので、困っている方は参考にしてください

今回初めてvueweasomeを使用しました。 。

確かに落とし穴はたくさんあります。公式サイトに書かれている使い方は非常に簡単で、上記の方法に従うと基本的に以下の問題が発生します

2番目のカルーセル以降、最初の画面は自動的にスキップされます

インターネットですが、この問題は解決できません。それで、長い間考えて、ついにアイデアを思いつきました。ちょっとしたトリックでこの問題は解決します。

使用方法は非常に簡単です。公式ウェブサイトで方法を確認できます。基本的な手順は次のとおりです

npm install vue-awesome-swiper --save-dev

in main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

vueコンポーネント内

データの後にスワイパーを初期化する必要があるため、ソリューションは赤でマークされていますがロードされていますが、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
    }

もう一つは、タッチスクリーン上でスライドした後にアプリが自動的に回転できないバグです。次のステッカーは解決されました

disableOnInteractionをfalseに設定するだけです
。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue で Echarts を使用する 2 つの方法の紹介

VUE でよく使用されるいくつかのインポート (モジュール、ファイル) 導入方法の紹介

以上がvue awesome swiper でのデータの非同期読み込みのバグ問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。