lipten/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';
require('react-slidepage/lib/index.css');

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