이 글에서는 Vue 캐러셀 플러그인인 vue-concise-slider의 사용법을 주로 소개하고 참고용으로 올려드리겠습니다.
vue-concise-slider
vue-concise-slider, 간단한 슬라이딩 구성 요소, 구성이 간단하고 적응형/전체 화면 + 버튼 + 페이징을 지원하며 모바일 및 PC 버전 모두와 호환됨
v2 .4.7은 vue2.0+를 지원합니다
기능
간단한 구성
경량(~24kB gzipped)
다양한 슬라이딩 스타일
현재 구현됨
전체 화면 적응형
모바일 호환
세로 스크롤
타이밍 자동 전환
가변 폭 스크롤
심리스 루프 스크롤
다단계 스크롤
그라디언트 스크롤
회전 및 스크롤
페이지에 사용자 정의 구성 요소 추가
향후에는
그라디언트 스크롤
시차 효과
link
문서
데모
설치
npm install vue-concise-slider --save
사용법
<template> <!-- 制作一个框架包裹slider --> <p style="width:70%;margin:20px auto;height:400px"> <!-- 配置slider组件 --> <slider :pages="pages" :sliderinit="sliderinit" @slide='slide' @tap='onTap' @init='onInit'> <!-- 设置loading,可自定义 --> <p slot="loading">loading...</p> </slider> </p> </template> <script> import slider from 'vue-concise-slider'// import slider components export default { el: '#app', data () { return { //Image list pages:[ { html: '<p class="slider1">slider1</p>', style: { 'background': '#1bbc9b' } }, { html: '<p class="slider2">slider2</p>', style: { 'background': '#4bbfc3' } }, { html: '<p class="slider3">slider3</p>', 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>
위 내용은 앞으로 모든 분들에게 도움이 되길 바랍니다.
관련 기사:
Vue의 내장 구성 요소 구성 요소의 응용 시나리오에 대한 간단한 토론
vue-cli scaffolding-configuration 파일 bulid
위 내용은 vue 회전식 차트 플러그인 vue-concise-slider 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!