V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  React

React 有限无限加载组件

  •  
  •   thundernet8 · 220 天前 · 1498 次点击
    这是一个创建于 220 天前的主题,其中的信息可能已经有所发展或是发生改变。

    试用了 github 上一些无限滚动加载组件,但对总是无限加载这一点并不满意,因为凡事有个度,也许用户只是想看看页脚,因此花了点时间做了个有限无限加载组件,提交到了 npm

    npm

    Github

    Demo

    Limited Infinite Scroll

    React 无限滚动加载组件,加载一定分页后改为手动加载器(因为有些用户不喜欢永远无限加载,可能他们只是想看 Footer)

    安装

    npm install react-limited-infinite-scroll --save-dev
    

    使用

    import LimitedInfiniteScroll from 'react-limited-infinite-scroll'
    
    const { total, list } = this.props.data
    
    const items = list.map((item, index) => {
        return (
            <div key={index}>
                <div>item content</div>
            </div>
        )
    })
    
    <LimitedInfiniteScroll 
        limit={5} 
        hasMore={total === undefined || items.length < total}
        spinLoader={<div className="loader">Loading...</div>}
        mannualLoader={<span style={{fontSize: 20, lineHeight: 1.5, marginTop: 20, marginBottom: 20, display: 'inline-block'}}>Load More</span>}
        noMore={<div className="loader">No More Items</div>} 
        loadNext={this.loadNextFunc}>
        {items}
    </LimitedInfiniteScroll>
    

    Props

    查看github格式化的介绍 Github

    其它

    使用 React 15.4+的用户,由于 PropTypes 已经从 React 主库分离,请安装 2.x.x 版本

    npm install react-limited-infinite-scroll --save-dev
    

    而使用较老版本 React 的用户,安装 1.x.x 版本

    npm install react-limited-infinite-scroll@^1.0.0 --save-dev
    
    1 回复  |  直到 2017-04-18 09:01:22 +08:00
        1
    wtgam   220 天前 via iPhone
    电脑上滚动加载真的很烦
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2688 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 34ms · UTC 05:46 · PVG 13:46 · LAX 21:46 · JFK 00:46
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1