轻量无依赖的全屏滚动组件，适配移动端，具有
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 | 是否开启移动端触控滑动 |
SlideContainer:
| name | description |
|---|---|
| before | 每次��全屏滚动前触发事件，�回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向('next'/'prev')、滚动后的page序号 |
| after | 次��全屏滚动后触发事件，�回调三个参数(origin, direction, target)，参数释义同上 |
MIT
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
