1. 首先引入插件 import ReactPullLoad, {STATS} from 'react-pullload'

2. 初始化:

       constructor(props) {
super(props);
this.state = {
action: STATS.init,
hasMore: true,
isMore:1,
page:1 }

3. // 用来触发加载和刷新的函数

handleAction = (action) => {
console.info(action, this.state.action, action === this.state.action);
//new action must do not equel to old action
if(action === this.state.action) {
return false
} if(action === STATS.refreshing) { //刷新
this.handRefreshing(); } else if(action === STATS.loading) { //加载更多
this.handLoadMore();
} else {
//DO NOT modify below code
this.setState({
action: action
})
}
}
//刷新
handRefreshing = () => {
if(STATS.refreshing === this.state.action) {
return false
}
setTimeout(() => {
//refreshing complete
this.setState({
hasMore: true,
action: STATS.refreshed
});
}, 2000)
this.setState({
action: STATS.refreshing
})
}
//加载更多
handLoadMore = () => {
if(STATS.loading === this.state.action) {
return false
}
setTimeout(() => {
if(this.state.isMore === 0) {
this.setState({
action: STATS.reset,
hasMore: false
});
} else {
var n=this.state.page;
n++;
$.ajax({
type: "POST",
url:httphead+"/author/goods/getList",
data:{
page:n,
end:10,
cateIds:catAllId,
keyword:this.state.value
},
headers:{
Authorization:headers_vendor
},
success:function(data){ if(data.code == 100){
var nData = this.state.goodList.concat(data.data.goodsList);
this.setState({
goodList:nData,
action: STATS.reset,
isMore:data.data.isMore,
page:n
})
}else if(data.code == 500){
window.location.href = "/";
}else{
alert(data.message);
}
}.bind(this)
})
}
}, 500) this.setState({
action: STATS.loading
})
}

在react中引入下拉刷新和上拉加载的更多相关文章

  1. android--------自定义控件ListView实现下拉刷新和上拉加载

    开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...

  2. Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)

    PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...

  3. 使用PullToRefresh实现下拉刷新和上拉加载

    使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...

  4. 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)

    前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...

  5. Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理

    RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...

  6. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. IOS 开发下拉刷新和上拉加载更多

    IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...

  8. IOS UITableView下拉刷新和上拉加载功能的实现

    在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...

  9. 下拉刷新和上拉加载 Swift

    转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...

  10. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

随机推荐

  1. FusionCharts封装-dataset和categories

    Chart.java: /** * @Title:Chart.java * @Package:com.fusionchart.model * @Description:FusionCharts 封装d ...

  2. R语言︱机器学习模型评价指标+(转)模型出错的四大原因及如何纠错

    笔者寄语:机器学习中交叉验证的方式是主要的模型评价方法,交叉验证中用到了哪些指标呢? 交叉验证将数据分为训练数据集.测试数据集,然后通过训练数据集进行训练,通过测试数据集进行测试,验证集进行验证. 模 ...

  3. stm32开发之串口的调试

    总的函数如下 void USART1Configuration(void){    RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA | RCC_APB2Peri ...

  4. Java Web项目(Extjs)报错七

    1.Java Web项目(Extjs)报错七 具体报错如下:

  5. JDBC连接池-自定义连接池

    JDBC连接池 java JDBC连接中用到Connection   在每次对数据进行增删查改 都要 开启  .关闭  ,在实例开发项目中 ,浪费了很大的资源 ,以下是之前连接JDBC的案例 pack ...

  6. java的System.getProperty()获取的值

    public class SystemProperty { public static void main(String args[]) { System.out.println("java ...

  7. activemq的案例

  8. 关于如何使用SVN的一些建议

    SVN是管理源码的主流方式之一,当多人同时编辑同一项目时经常会出现冲突,本文主要针对Asp.net 项目开发中使用SVN提出一点建议. 1.忽略asp.net 项目中的非源代码文件 .VS目录是vis ...

  9. LeetCode之Easy篇 ——(1)Two Sum

    1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...

  10. 华为/华三交换机snmp配置

    snmp-agent                       /使能snmp服务/snmp-agent local-engineid 000007DB7F000001000049DD   /系统自 ...