vue-fast-scroll v0.0.6
vue-fast-scroll
모바일의 Fast Scroll 기능을 Web 기반의 Vue.js에서 지원하기 위한 플러그인입니다.
Demo
example 디렉토리 밑에 예제 파일로도 확인 할 수 있습니다.
Install
CDN
NPM
global
local
사용 설명
fast-scroll Component
fast-scroll 컴포넌트를 사용하여 그 안에 fast scroll을 지원해야 될 엘리먼트를 선언합니다. fast-scroll 컴포넌트는 key-list 프로퍼티와 options 프로퍼티를 가집니다.
key-list Property
key-list 프로퍼티로 전달 되어야 할 값은 key와 text를 쌍으로 가지는 객체입니다.
위의 코드와 같이 key-list를 구성한다면, HTML에는
위의 HTML이 랜더링 됩니다. 이 엘리먼트를 인덱스 리스트라고 하도록 하겠습니다. 인덱스 리스트는 fast scroll key 목록을 리스트로 나타내는 엘리먼트 입니다.
fast-scroll-key에는 key-list 프로퍼티 리스트 아이템의 key 값이 되고, li 태그의 문자열은 key-list 프로터티 리스트 아이템의 text가 됩니다.
options 프로퍼티
Fast Scroll의 옵션 설정 프로퍼티입니다.
toggleDurationTime (default: 500)
Fast Scroll 시 어느 위치로 이동했는지 나타내는 토글 텍스트의 유지시간을 설정 합니다. 단위는 ms입니다.
paddingScroll (default: 0)
Fast Scroll 시 타겟 위치보다 얼마나 더 스크롤 할 것인지 설정 합니다.
fast-scroll Component의 Slot
fast-scroll 컴포넌트의 자식 컴포넌트로 scrollList라는 이름을 가지는 Slot을 정의해야 합니다. 이 Slot은 스크롤 될 엘리먼트가 됩니다. 이 엘리먼트를 스크롤 리스트라고 하도록 하겠습니다.
fast-scroll-key Property
fast-scroll-key 프로퍼티는 스크롤 리스트 각각의 아이템에 선언되어야 하는 프로퍼티입니다.
fast-scroll 컴포넌트의 key-list 프로퍼티에 정의 된 key와 fast-scroll 컴포넌트의 하위 컴포넌트에 정의 된 fast-scroll-key가 매칭 되는 엘리먼트를 찾아 스크롤 되게 됩니다.
Style
.scroll-list
Fast Scroll로 스크롤 될 스크롤 리스트의 스타일 클래스(<div class="scroll-list"></div>)입니다.
.index-list
Fast Scroll 할 key과 text로 구성된 인덱스 리스트의 스타일 클래스(<div class="index-list"><ul>...</ul></div>)입니다.
.fast-scroll-toggle
어느 위치로 스크롤 되었는지 나타내는 문자열의 스타일 클래스(<div class="fast-scroll-toggle"></div>) 입니다.
.fade-leave-active, .fade-leave-to
어느 위치로 스크롤 되었는지 나타내는 문자열의 fade Animation 스타일 클래스 입니다.