0.0.1 • Published 3 years ago

react-full-or-element-scroller v0.0.1

Weekly downloads
8
License
-
Repository
github
Last release
3 years ago

Reach-Full-Scroll

基于React的全屏滚动组件,会在指定的两个屏幕间切换,过程中不会显示其他屏幕。

Install

npm i react-full-scroll or yarn add react-full-scroll

Usage

import FullScroll from 'react-full-scroll';

class Demo extends Component {
    render() {
        return (
            <div style={{ width: 500, height: 300 }}>
                <FullScroll>
                    <FullScroll.Item key="first">
                        <div style={{ background: 'skyblue' }}>
                            content one
                        </div>
                    </FullScroll.Item>
                    <FullScroll.Item key="second">
                        <div style={{ background: 'pink' }}>
                            content two
                        </div>
                    </FullScroll.Item>
                <FullScroll>
            </div>
        )   
    }
}

Properties

namerequireddescdefault
defaultKeyfalse默认key-
classNamefalse自定义class-
directionfalse滚动方向vertical或horizontalvertical
disabledMouseScrollfalse禁用鼠标滚轮事件false
transitionTimefalse滑动过渡时间ms1000
toggleClassTimefalse切换动画class间隔ms50
addEventToDocumentfalse是否将鼠标事件添加到document元素false
onReachBorderfalse到达屏幕边界事件-
onChangefalse屏幕切换事件-
onTransitionEndfalse过渡结束事件-

Methods

namedescparams
toggleScreen跳转到指定key的屏幕(key: 需要跳转到屏幕的key)
nextScreen跳转到下一屏-
prevScreen跳转到上一屏-

Tips

  • 在切换屏幕过渡结束前,尝试切换屏幕不会生效。这个问题预计在下个版本中修复。
  • 请给组件的父元素设定宽高