vue カルーセルチャートプラグイン vue-concise-slider の使用-jsチュートリアル-php.cn

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

亚连

リリース： 2018-05-30 17:14:38

オリジナル

4106 人が閲覧しました

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

vue-concise-slider

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

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

特徴

シンプルな構成
軽量 (~24kB gzip 圧縮)
複数のスライドスタイル

現在実装されています

全画面アダプティブ
モバイル対応
垂直スクロール
タイミング自動切り替え
可変幅スクロール
マルチレベルスクロール
グラデーションスクロール
回転とスクロール
ページにカスタムコンポーネントを追加
将来的には、

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

視差効果

インストール
```
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 サイトの他の関連記事を参照してください。