Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつかの一般的なエラーを簡単に確認しました。

1. Get .../maps/swiper.min.js.map 500 (内部サーバーエラー) が表示される

最小バージョンを使用するとソースマップファイルが見つからない

1. ソースマッププロンプトを無効にして、swiper.min.js ファイルの最後の行を削除します //# sourceMappingURL=swiper.min.js.map

2. ソースマップを使用する必要がある場合は、完全なパッケージに swiper.min.js.map ファイルが含まれているので、それを対応する場所に配置してください。ソースマップについて

2. ビデオは自動的に回転できず、ページ区切りも表示されません。

解決：

インストールにバージョン番号をプラスします。

vue-awesome-swiper プラグインパッケージのバージョンの問題により、左矢印と右矢印のクリックが失敗する可能性があります。

解決策は次のとおりです。

npm uninstallvue-awesome-swiper --save
npm [email protected] --save

バージョン3.1.3をインストールした後、再起動して問題が解決するか確認してください。

3. レンダリング時にエラーが発生します: 「TypeError: Cannot set property 'params' of undefined」が表示されます --- これはバージョン番号に関係しています。バージョン 4.0 の最初の文字は大文字で、バージョン 3.0 の最初の文字は小文字です。

回答リンク: https://github.com/surmon-china/vue-awesome-swiper/issues/499

如果使用的是3.x版本[email protected] 、インポートコードは次のようになります。

'vue-awesome-swiper'から{swiper、swiperSlide}をインポートします

如果使用的是4.x版本[email protected] 、インポートコードは次のようになります。

'vue-awesome-swiper から { Swiper, SwiperSlide } をインポートします

4. キャッチされない ReferenceError: Swiper が定義されていません...

JS ファイルが読み込まれていないか、場所が間違っている可能性があります。

解決策は次のとおりです。

ファイルパッケージをダウンロードし、ページに Swiper の JS および CSS ファイルを読み込むか、Swiper の CDN サービスを使用してファイルを読み込み、読み込み後に Swiper を初期化します。

Vue中使用Swiper的用法如下：

1つ目はグローバルインポート

main.js内

'vue-awesome-swiper' から VueAwesomeSwiper をインポートします。
 「swiper/dist/css/swiper.css」をインポートします。
 
 Vue.use(VueAwesomeSwiper)

2番目の方法：現地導入

使用されるモジュールのjsファイル内

「vue-awesome-swiper」から swiper、swiperSlide をインポートします。
「swiper/dist/css/swiper.css」をインポートします。
 
エクスポートデフォルト{
    
    コンポーネント:
        スワイパー、
        スワイパースライド
    }
}

.vue ファイルでは、左矢印と右矢印がカルーセルの外側に配置されています。コードは次のとおりです。

<swiper クラス="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </スワイパースライド>
      <div class="swiper-pagination" slot="ページネーション"></div>
</スワイパー>
 
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>

.vue ファイルでは、左矢印と右矢印がカルーセル内に配置されます。コードは次のとおりです。

<swiper クラス="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </スワイパースライド>
      <div class="swiper-pagination" slot="ページネーション"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
</スワイパー>

上記swiperOptionの設定情報は以下の通りです。詳細は公式サイトをご覧ください：https://www.swiper.com.cn/api/index.html

これで、vue で swiper プラグインを使用する際のエラー問題についての記事は終了です。vue で swiper プラグインを使用する際の関連コンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: