VueにSwiperプラグインをインポートするにはどうすればよいですか?-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-08 17:36:41

オリジナル

1771 人が閲覧しました

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

バージョンの選択

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

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

インストール

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

npm i swiper@3.4.2 -S

ログイン後にコピー

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

npm view 包名 versions

ログイン後にコピー

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

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

プラグインの読み込み
HTML コンテンツ
Swiper のサイズを定義
Swiper を初期化

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

プラグインをロード

import Swiper from &#39;swiper&#39;;
import &#39;swiper/dist/css/swiper.min.css&#39;;

ログイン後にコピー

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(&#39;.swiper-container&#39;, {})
}

ログイン後にコピー

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

完了

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

mounted(): {
  var mySwiper = new Swiper(&#39;.swiper-container&#39;, {})
}

ログイン後にコピー

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

データのレンダリング

実際のプロジェクトでは、バナーグラフィックスの効果を実現するためにスワイパープラグインがよく使用されます(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(&#39;/user?ID=12345&#39;)
 .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の装飾デザインパターンの詳細な解釈