VueにSwiperプラグインをインポートするにはどうすればよいですか?

この記事では主にvueプロジェクトにswiperプラグインをインポートする方法を紹介しますので、参考にしてください。

バージョンの選択

swiper は一般的に使用されるプラグインであり、現在は第 4 世代である swiper4 まで反復されています。

一般的に使用されるバージョンは swiper3 と swiper4 です。私は swiper3 を選択しました。

インストール

swiper3 の最新バージョン 3.4.2 をインストールします:

npm i swiper@3.4.2 -S

ちょっとした知識、ノード パッケージのすべてのバージョン番号を表示する方法:

npm view 包名 versions

コンポーネントの書き込み

の公式の方法Swiper の使用は 4 つのプロセスに分かれています:

1. プラグインの読み込み

2. HTML コンテンツ

3. Swiper のサイズを定義

4. Swiper を初期化

また、このプロセスに従ってコンポーネントを作成します。

プラグインをロード

import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

HTMLコンテンツ

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

Swiperのサイズを定義する

.swiper-container {
  width: 600px;
  height: 300px;
}

Swiperを初期化する

domレンダリングが完了するまでSwiperを初期化できないため、初期化する必要があります入れられるvue ライフサイクル フック関数が実装されています:

mounted(): {
  /* eslint-disable no-new */
  new Swiper('.swiper-container', {})
}

/* eslint-disable no-new */ 上記のコードは、eslint コード検出を有効にするプロジェクトで使用できます。eslint が利用できない場合は、次のコードを使用します。

完了

上記のコードを結合します:

mounted(): {
  var mySwiper = new Swiper('.swiper-container', {})
}

実行すると、カルーセルの効果が得られることがわかります。しかし、これまでのところ、カルーセル効果のみが実現されており、データはレンダリングされていません。

データのレンダリング

実際のプロジェクトでは、バナーグラフィックスの効果を実現するためにスワイパープラグインがよく使用されます(Sinaモバイルバージョン):

データの取得

私は通常ajaxを使用しますVue プロジェクトのプラグイン Axios では例を示します:

<template>
  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </p>
</template>

<script>
import Swiper from &amp;#39;swiper&amp;#39;;
import &amp;#39;swiper/dist/css/swiper.min.css&amp;#39;;
export default {
  mounted(): {
    var mySwiper = new Swiper(&#39;.swiper-container&#39;, {})
  }
}
</script>

はデータを取得するためのデータ構造を次のように定義します:

axios
 .get('/user?ID=12345')
 .then(function (response) {
  this.imgList = response;
 })
 .catch(function (error) {
  console.log(error);
 });

リストのレンダリング

[
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif",
  "https://www.baidu.com/img/baidu_jgylogo3.gif"
]

ここまででデータのレンダリングは完了しましたが、実際の効果を見ると、バナーではカルーセルの効果を得ることができません。ここでは画像がレンダリングされるだけですが、カルーセル画像はレンダリングされ、初期化されていません。ライフサイクルをマウントした時点で初期化が完了しているため。

初期化

したがって、データが取得され、DOM が更新された後、スワイパーを再初期化する必要があります。

rreee

この時点で、カルーセル画像の効果が実現されます。

概要

swiper は一般的に使用されるプラグインですが、swiper を vue プロジェクトにインポートするときに多くの問題が発生します。主な問題は、さまざまな JS プラグインを効果的に使用できるように、vue のライフ サイクルを理解することです。

上記は私があなたのためにまとめたものです。

関連記事:

Vueを使用して基本的な原則を実装する(詳細なチュートリアル)

jsでファイルのドラッグを制御し、ドラッグコンテンツ関数を取得する方法

jsの装飾デザインパターンの詳細な解釈

以上がVueにSwiperプラグインをインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。