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. 【javascript】jquery jsonp跨越请求

    <html> <head> <meta charset="utf-8"> <title></title> <scr ...

  2. (二十六)svn的问题二

    上周五请了一天假,电脑放在公司没有带回来,三天的时间都没有看代码,使得我电脑上的东西与svn上相差了太多,因为不一样,所以就要更新同步,因为要更新同步的东西多,便又出了一些问题,也因此对svn有了更进 ...

  3. CentOS修改root密码

    1.在系统启动时,按任意键中止启动 2.按E键修改系统启动文件 3.找到linux16开头的行,把整行ro后面内容删除,添加rd.break 4.Ctrl+X更改并重启 5.重新挂载/sysroot ...

  4. 对ajax回调函数的研究

    1.1开发中遇到的问题 最近开发中我和同事都碰到这样的问题,我们使用jQuery的ajax方法做服务端的校验,在success方法里将验证结果存储到一个js的公共变量或者是页面里的隐藏域,接下来的代码 ...

  5. MyISAM和InnoDB索引实现区别

    首先来讲MyISAM: MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.下图是MyISAM索引的原理图: 这里设表一共有三列,假设我们以Col1为主键,则上图是 ...

  6. Windows系统还原失败心得

    最近我的Windows10连续几天出现了蓝屏,怀疑是某软件的Bug造成的,于是想用系统还原功能回到前一段时间,我找到了那款软件安装的时间. 到了选择还原点界面,发现有5个还原点,最旧的一个刚好就是那款 ...

  7. Luogu P3412 仓鼠找$sugar$ $II$

    Luogu P3412 仓鼠找\(sugar\) \(II\) 题目大意: 给定一棵\(n\)个点的树, 仓鼠每次移动都会等概率选择一个与当前点相邻的点,并移动到此点. 现在随机生成一个起点.一个终点 ...

  8. [CF932E]Team Work & [BZOJ5093]图的价值

    CF题面 题意:求\(\sum_{i=0}^{n}\binom{n}{i}i^k\) \(n\le10^9,k\le5000\) 模\(10^9+7\) BZOJ题面 题意:求\(n*2^{\frac ...

  9. hbase 导入导出、hbase shell 基本命令。

    数据导入 ./hbase org.apache.hadoop.hbase.mapreduce.Driver import  表名    数据文件位置hdfs数据文件位置 可以加 前缀 file:/// ...

  10. angular采坑记录

    在angular中会遇到一些莫名的问题,导致不能完成想要的功能,可能是某项用法使用错误,或许是angular相对应不支持,或者是我们功力根本就没有达到.为了在每次采坑之后能有所收获,再遇到时能理解其根 ...