怎么在vue中使用concise-slider插件？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

融安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

vue-concise-slider

vue-concise-slider,一個(gè)簡(jiǎn)單的滑動(dòng)組件,配置簡(jiǎn)單,支持自適應(yīng)/全屏+按鈕+分頁,同時(shí)兼容移動(dòng)端和PC端

版本

v2.4.7 支持vue2.0+

特點(diǎn)

1. 簡(jiǎn)單配置

2. 輕量 (~24kB gzipped)

3. 多種滑動(dòng)樣式

目前已實(shí)現(xiàn)

1. 全屏自適應(yīng)

2. 移動(dòng)端兼容

3. 垂直滾動(dòng)

4. 定時(shí)自動(dòng)切換

5. 不定寬度滾動(dòng)

6. 無縫循環(huán)滾動(dòng)

7. 多級(jí)滾動(dòng)

8. 漸變滾動(dòng)

9. 旋轉(zhuǎn)滾動(dòng)

10. page中加入自定義組件

未來將實(shí)現(xiàn)

1. 漸變滾動(dòng)

2. 視差效果

鏈接

1. 文檔

2. demo

安裝

npm install vue-concise-slider --save

如何使用

<template>
<!-- 制作一個(gè)框架包裹slider -->
 <div >
   <!-- 配置slider組件 -->
   <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'>
     <!-- 設(shè)置loading,可自定義 -->
     <div slot="loading">loading...</div>
   </slider>
 </div>
</template>
<script>
import slider from 'vue-concise-slider'// import slider components
export default {
  el: '#app',
  data () {
   return {
    //Image list
    pages:[
     {
     html: '<div class="slider1">slider1</div>',
     style: {
      'background': '#1bbc9b'
      }
     },
     {
      html: '<div class="slider2">slider2</div>',
      style: {
       'background': '#4bbfc3'
      }
     },
     {
      html: '<div class="slider3">slider3</div>',
      style: {
       'background': '#7baabe'
      }
     }
    ],
    //Sliding configuration [obj]
    sliderinit: {
     currentPage: 0,
     thresholdDistance: 500,
     thresholdTime: 100,
     autoplay:1000,
     loop:true,
     direction:'vertical',
     infinite:1,
     slidesToScroll:1,
     timingFunction: 'ease',
     duration: 300
    }
   }
  },
  components: {
    slider
  },
  methods: {
   // Listener event
   slide (data) {
    console.log(data)
   },
   onTap (data) {
    console.log(data)
   },
   onInit (data) {
    console.log(data)
   }
  }
}
</script>

看完上述內(nèi)容，你們掌握怎么在vue中使用concise-slider插件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：怎么在vue中使用concise-slider插件
轉(zhuǎn)載來于：http://www.chinadenli.net/article0/pesgoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、企業(yè)建站、服務(wù)器托管、靜態(tài)網(wǎng)站、、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)