vue-slidePage

Introduction

vue-slidePage is a fullscreen scrolling component of Vue.js, Based on slidePage

Demo

• simple
• custom

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)，参数释义同上	$event.after

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