デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつかの一般的なエラーを簡単に確認しました。 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 プラグイン パッケージのバージョンの問題により、左矢印と右矢印のクリックが失敗する可能性があります。 解決策は次のとおりです。
バージョン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
'vue-awesome-swiper'から{swiper、swiperSlide}をインポートします
'vue-awesome-swiper から { Swiper, SwiperSlide } をインポートします 4. キャッチされない ReferenceError: Swiper が定義されていません... JS ファイルが読み込まれていないか、場所が間違っている可能性があります。 解決策は次のとおりです。ファイル パッケージをダウンロードし、ページに Swiper の JS および CSS ファイルを読み込むか、Swiper の CDN サービスを使用してファイルを読み込み、読み込み後に 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: クラスタrpmを使用してMySQLをインストールするための詳細な手順
>>: Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...
この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...
Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...
画像タグは、Web ページに画像を表示するために使用されます。 HTML/XHTML 画像 <...
目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...
目次序文1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介2.webscoked実装...
mysql5.6 のグリーン バージョンを解凍すると、my-default.ini ファイルが作成さ...
目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...
まず、ページ分割クエリを使用する理由を明確にする必要があります。データが膨大なため、すべてのデータを...
目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...
はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...
序文セキュリティ上の理由から、MySQL の root ユーザーはローカルにのみログインでき、外部ネ...