vue カルーセル チャート プラグイン vue-concise-slider の使用

この記事では、vue カルーセル プラグインである vue-concise-slider の使い方を主に紹介しますので、参考にしてください。

vue-concise-slider

vue-concise-slider、シンプルなスライドコンポーネント、構成が簡単、アダプティブ/フルスクリーン + ボタン + ページングをサポート、モバイルバージョンと PC バージョンの両方と互換性があります

v2 .4.7 は vue2.0+ をサポート

特徴

1. シンプルな構成

2. 軽量 (~24kB gzip 圧縮)

3. 複数のスライド スタイル

現在実装されています

1. 全画面アダプティブ

2. モバイル対応

3. 垂直スクロール

4. タイミング自動切り替え

5. 可変幅スクロール

6. マルチレベルスクロール

7. グラデーションスクロール

8. 回転とスクロール

9. ページにカスタムコンポーネントを追加

10. 将来的には、

グラデーションスクロール

1. 視差効果

リンク
ドキュメント

デモ
2. インストール

   npm install vue-concise-slider --save

使い方

<template>
<!-- 制作一个框架包裹slider -->
 <p style="width:70%;margin:20px auto;height:400px">
   <!-- 配置slider组件 -->
   <slider :pages="pages" :sliderinit="sliderinit" @slide=&#39;slide&#39; @tap=&#39;onTap&#39; @init=&#39;onInit&#39;>
     <!-- 设置loading,可自定义 -->
     <p slot="loading">loading...</p>
   </slider>
 </p>
</template>
<script>
import slider from &#39;vue-concise-slider&#39;// import slider components
export default {
  el: &#39;#app&#39;,
  data () {
   return {
    //Image list
    pages:[
     {
     html: &#39;<p class="slider1">slider1</p>&#39;,
     style: {
      &#39;background&#39;: &#39;#1bbc9b&#39;
      }
     },
     {
      html: &#39;<p class="slider2">slider2</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#4bbfc3&#39;
      }
     },
     {
      html: &#39;<p class="slider3">slider3</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#7baabe&#39;
      }
     }
    ],
    //Sliding configuration [obj]
    sliderinit: {
     currentPage: 0,
     thresholdDistance: 500,
     thresholdTime: 100,
     autoplay:1000,
     loop:true,
     direction:&#39;vertical&#39;,
     infinite:1,
     slidesToScroll:1,
     timingFunction: &#39;ease&#39;,
     duration: 300
    }
   }
  },
  components: {
    slider
  },
  methods: {
   // Listener event
   slide (data) {
    console.log(data)
   },
   onTap (data) {
    console.log(data)
   },
   onInit (data) {
    console.log(data)
   }
  }
}
</script>

以上、皆様のお役に立てれば幸いです。 関連記事:

Vue の組み込みコンポーネントのアプリケーション シナリオに関する簡単な説明

vue2 での less の使用に関する簡単なチュートリアル

bulid の下の vue-cli スキャフォールディング設定ファイル

以上がvue カルーセル チャート プラグイン vue-concise-slider の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。