broltes / react-touch-loader Goto Github PK

View Code? Open in Web Editor NEW

250.0 8.0 57.0 1.63 MB

React component for web pull to refresh and load more, 下拉刷新, 加载更多

License: MIT License

JavaScript 59.61% CSS 34.86% Shell 3.95% HTML 1.58%

react-touch-loader's Introduction

react-touch-loader

React component for web pull to refresh and load more, 下拉刷新, 加载更多

Live demo

Usage

npm install react-touch-loader

import Tloader from 'react-touch-loader';

<Tloader
    initializing={initializing}
    onRefresh={handleRefresh}
    hasMore={hasMore}
    onLoadMore={handleLoadMore}
    autoLoadMore={autoLoadMore}
    className="tloader some class">

    <ul><li>some items</li></ul>
</Tloader>

Less needed

react-touch-loader will automaticly import the less file, please config your webpack for less.

Container layout

You'd better set a className for Tloader, then give it a height make it as scroll area through css:

.tloader{
    height: 500px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

All props

initializing

0: do not display the progress bar
1: start progress bar
2: progress to end

onRefresh

function (resove, reject)
undefined: disable the pull to refresh action

hasMore

false: hide the load more footer (disable load more)
true: show the load more footer

onLoadMore

function (resove)

autoLoadMore

true: automaticly load more on scroll to bottom, default
false

className

custom css class

Localization

The text is defined in css(less):

@pullingMsg: '下拉刷新';
@pullingEnoughMsg: '松开刷新';
@refreshingMsg: '正在刷新...';
@refreshedMsg: '刷新成功';
@loadingMsg: '正在加载...';
@btnLoadMore: '加载更多';

.tloader-msg:after{
    .state-pulling &{
        content: @pullingMsg
    }

    .state-pulling.enough &{
        content: @pullingEnoughMsg;
    }

    .state-refreshed &{
        content: @refreshedMsg;
    }
}
.tloader-loading:after{
    content: @loadingMsg;

    .tloader-symbol &{
        content: @refreshingMsg;
    }
}
.tloader-btn:after{
    content: @btnLoadMore;
}

So you can easily overwrite the defaults by css like this:

.tloader .tloader-btn:after{
    content: 'Load More';
}

Example

check code from example/app.jsx

react-touch-loader's People

Contributors

Stargazers

Watchers

Forkers

jljlpch jocongmin justpushcar pfncfen y1feng200156 hearallparties joneyphair libin1991 benny1311 bluescurry l-woniu coinmini chenpeng-yiyu chechefeng hanxin272623823 kokororin lanzhangweb xintao222 wenpingzheng pheeno yang123guo yuangangwang myronliu lingling99 zula1994 chaneyandyou zhangfaliang haohailiang blackhorsefishman shenlanzhizunjustwangwei weizheng1992 maicfir zhanghaiyanzhy stevex2012 haipengz cuitymiko leetia316 fuphoenixes aurora-react chuyun 931168348 begin-agagin lilyneaoer foxie012901 kingport wally210 iyyn001 indexw mileagewan conkyliu complicated2018 zengjianxiong gss1017 x-zw water-ice 3436359054 bingjohn

react-touch-loader's Issues

如果加载失败了会有什么提示的吗？

如果在下拉刷新或者加载更多的网络请求中由于网络环境或者后台的原因导致无法加载到数据，会有什么提示吗？有没有做错误处理的？

Refresh is always running.

Refresh is always running. How to control to only give update at the top of the application when it is not at the top?

不适用onRefresh下拉刷新方法时，能禁止下拉效果吗

animationEnd为什么无法触发？

<Tloader onRefresh={this.refresh}>
       <GoodList goodListData={goodListData} />
</Tloader>

下拉刷新的时候发现onAnimationEnd绑定的animationEnd函数无法触发，导致刷新成功的提示信息无法隐藏。请问这是什么原因？

ios滚动会卡死

ios滚动有时候会卡死，滑动不了，重新滑动几下又会继续滑动。

第一次滚动底部自动加载

需要先点击点击加载更多，加载第二页。然后滚动到底部自动加载第三页。
如何在第一页的时候，滚动到底部加载第二页

非常感谢本项目，解决困扰我几天的问题

本库，解决了我移动网页列表下拉刷新，上拉加载更多+头部广告轮播等控件的嵌套布局冲突问题。之前用antd mobile的listview控件做这样的功能，发生了难以解决的冲突问题。好了，现在解决了。希望能了解更多关于本库下拉刷新和上拉加载的实现原理。谢谢

Cannot read property 'setState' of null

loadMore(resolve){

	setTimeout(()=>{
		var count = this.state.count;
		this.setState({
			count: count+5,
		});
        this.setState({news:NewsData.slice(0,this.state.count)});
	    this.setState({
		    hasMore: count>0 && count<50
        });
	    resolve();
	},2e3);
}