react-slidePage is a fullscreen scrolling component of React, Based on slidePage
$ 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>
)
}
}
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