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

亚连
풀어 주다: 2018-05-30 17:14:38
원래의
4151명이 탐색했습니다.

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿