slidePage-出react版本啦

react-slidePage

这个react版本是依赖于slidePage的基础上用react实现的小插件，后续slidePage更新了，这个react-slidePage也会自动更新的哟。

Introduction

react-slidePage is a fullscreen scrolling component of React, Based on slidePage

Demo

• simple
• custom

Usage

Install

$ npm i -S react-slidepage

Work on a React instance:

import { SlideContainer, SlidePage } from 'react-slidePage'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {name: 'Page1', class: 'page1'}
        {name: 'Page2', class: 'page2'}
      ]
    }
  }
  render() {
    return (
      <SlideContainer>
        {
          this.state.list.map((item, index) => {
            return (
              <SlidePage className={item.class}>
                {item.name}
              </SlidePage>
            )
          })
      </SlideContainer>
    )
  }
}

Props

SlideContainer:

name	type	default	description
page	Number	1	初始页码
useAnimation	Boolean	true	是否开启动画
refresh	Boolean	true	每次滚动进入是否重新执行动画
useWheel	Boolean	true	是否开启鼠标滚轮滑动
useSwipe	Boolean	true	是否开启移动端触控滑动

Events Props

SlideContainer:

name	description
before	每次全屏滚动前触发事件，回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向(‘next’/‘prev’)、滚动后的page序号
after	次全屏滚动后触发事件，回调三个参数(origin, direction, target)，参数释义同上

License

MIT