vue-slidePage
Introduction
vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage
Demo
Usage
Install
$ npm i -S vue-slidepage
Work on a Vue instance:
<slide-container> <slide-page v-for="(item, index) in list"> <h2>{{item.name}}</h2> </slide-page></slide-container>
import { SlideContainer, SlidePage } from 'vue-slidePage' new Vue( { el: 'body', data () { return { list: [ {name: 'Page1'}, {name: 'Page2'}, {name: 'Page3'}, ], } }, components: { SlideContainer, SlidePage }} )
Props
SlideContainer:
name | type | default | description |
---|---|---|---|
useAnimation | Boolean | true | 是否开启动画 |
refresh | Boolean | true | 每次滚动进入是否重新执行动画 |
useWheel | Boolean | true | 是否开启鼠标滚轮滑动 |
useSwipe | Boolean | true | 是否开启移动端触控滑动 |
Events
SlideContainer:
name | description | $event |
---|---|---|
before | 每次全屏滚动前触发事件,回调三个参数(origin, direction, target),分别是滚动前的page序号、方向('next'/'prev')、滚动后的page序号 | $event.before |
after | 次全屏滚动后触发事件,回调三个参数(origin, direction, target),参数释义同上 |
Slots
SlidePage:
name | description |
---|---|
default | Page's content |
usage:
<slide-container> <slide-page> <img src=""> <p></p> <button></button> </slide-page></slide-container>
License
MIT