首頁 >web前端 >js教程 >vue輪播圖外掛程式vue-concise-slider的使用

vue輪播圖外掛程式vue-concise-slider的使用

亚连
亚连原創
2018-05-30 17:14:384172瀏覽

這篇文章主要介紹了vue輪播圖插件vue-concise-slider的使用,現在分享給大家,也給大家做個參考。

vue-concise-slider

vue-concise-slider,一個簡單的滑動組件,配置簡單,支援自適應/全螢幕按鈕分頁,同時相容於行動端和PC端

版本

v2.4.7 支援vue2.0

特點

  1. 簡單配置

  2. 輕量(~24kB gzipped)

  3. #多種滑動樣式

##目前已實現

  1. 全螢幕自適應

  2. 手機端相容

  3. ##垂直捲動
  4. #定時自動切換
  5. 不定寬度捲動
  6. #無縫循環滾動
  7. 多層次捲動
  8. 漸層捲動
  9. #在旋轉捲動
  10. page加入自訂元件
  11. 未來將實作

    漸變捲動
  1. 視差效果
  2. 連結

    文件
  1. #demo
安裝

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內建component元件的應用程式場景

vue2中使用less簡易教學

#vue-cli腳手架-bulid下的設定檔

以上是vue輪播圖外掛程式vue-concise-slider的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn