vue 회전식 차트 플러그인 vue-concise-slider 사용

이 글에서는 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. 페이지에 사용자 정의 구성 요소 추가

향후에는

1. 그라디언트 스크롤

2. 시차 효과

link

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를 사용하는 간단한 튜토리얼

vue-cli scaffolding-configuration 파일 bulid

위 내용은 vue 회전식 차트 플러그인 vue-concise-slider 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!