node package manager

tingle-load-more

tingle-load-more npm version

Load-more 是下拉加载更多插件。只控制「加载更多」状态条的显示隐藏,通知父元素进行加载。

Simple Usage

constructor(props) {
    super(props);
    this.state = {
        data: [],
        page: 1
    }
}
 
 
componentDidMount() {
    // 默认需要直接先初始化一次 
    this.startLoad();
}
 
startLoad() {
    const t = this;
    let loadMore = t.refs.loadMore;
 
    // 告诉 LoadMore 开始加载了,LoadMore 会显示正在加载中 
    loadMore.loading();
 
    $.getJSON(URL, {page: t.state.page}, function (d) {
        if (d.success) {
            let data = t.state.data.concat(d.data);
            t.setState({data: data, page: ++t.state.page});
            if(d.hasMore){
                // 告诉 LoadMore 加载完成 , 如果不告知 LoadMore 已经加载完成,LoadMore 不会再监听下一次的 inViewPort 事件 
                loadMore.loaded();
            }else{
                // 告诉 LoadMore 已经没有更多了,LoadMore 会显示没有更多。 
                loadMore.noMore();
            }
        }
    })
}
 
render() {
    return (
        <div>
            {this.state.data.map(function (d) {
                return (<p key={Context.getTID()} className="tDemoP tFAC">{d}</p>);
            })}
            <LoadMore className="tFAC" offset={50} onLoadMore={this.startLoad.bind(this)} ref='loadMore'>
            </LoadMore>
        </div>
    );
}

可用配置

配置项 必填 默认值 功能/备注
offset optional 50 数据(注1)
onLoadMore required Tingle.noop() 触发加载之后的调用函数 (注2)
loadingText optional 正在加载中… 加载中的文案
noMoreText optional 没有啦! 没有更多的文案

注1: offset 的 最小取值为 50 ,当传入的值小于 50 时,会自动传入 50 ,用以修复在某些 Android 机型上的兼容性问题。

注2: 每次当用户滑动到需要加载的位置时,load-more 会通知父级元素去加载数据,也就是通过这个函数传递。

API接口

.loading()

加载锁,防止重复触发 onLoadMore 事件。

.loaded()

changed in 0.2.1 : 如果不满一屏,loaded 执行自后会自动再次触发加载。

加载完成时调用的函数。

.noMore()

没有更多了。

Links 相关链接