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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • スワイパープラグインを使用して Vue でカルーセルを実装する例
  • Vue でのスワイパープラグインの使用と Vue でのスワイパーの使用に関する問題を解決する
  • react-nativeパッケージプラグインswiperの使い方
  • Angular.jsでSwiperプラグインがスライドできない問題を解決
  • vue-awesome-swiper スライダープラグインの使い方の詳しい説明
  • vueで導入されたswiperプラグインの使用例
  • Swiperプラグインの使い方と導入方法を学びましょう

<<:  クラスタrpmを使用してMySQLをインストールするための詳細な手順

>>:  Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

推薦する

Vue3.0 は虫眼鏡効果のケーススタディを実装します

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

HTML ベースタグ target=_parent の使用の紹介

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

HTML/XHTML における img 画像タグの基本的な使用法の詳細な説明

画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...

ファイルのアップロードの進行状況を示す React の例

目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...

Websocket+Vuexはリアルタイムチャットソフトウェアを実装します

目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...

mysql5.6 の無効な utf8 設定の問題を解決する

mysql5.6 のグリーン バージョンを解凍すると、my-default.ini ファイルが作成さ...

WeChatミニプログラムでトークンの有効期限を処理する方法

目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...

MySqlはページクエリ機能を実装します

まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

見落とされがちなMETAタグの特殊効果(ページ遷移効果)

Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...

MySQLテクノロジーにおけるInnoDBロックの詳細な説明

目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

Mysql SSHトンネル接続を使用するための基本的な手順

序文セキュリティ上の理由から、MySQL の root ユーザーはローカルにのみログインでき、外部ネ...