UNPKG

tingle-load-more

Version:
93 lines (67 loc) 2.68 kB
# tingle-load-more [![npm version](https://badge.fury.io/js/tingle-load-more.svg)](http://badge.fury.io/js/tingle-load-more) Load-more 是下拉加载更多插件。只控制「加载更多」状态条的显示隐藏,通知父元素进行加载。 <img src="https://img.alicdn.com/tps/TB1Dj2YJpXXXXbiXFXXXXXXXXXX-750-1254.png" width="375"/> ## Simple Usage ```javascript 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 相关链接 - [Fire a bug/Issues 提Bug](http://github.com/tinglejs/tingle-load-more/issues)