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. PaddlePaddle︱开发文档中学习情感分类(CNN、LSTM、双向LSTM)、语义角色标注

    PaddlePaddle出教程啦,教程一部分写的很详细,值得学习. 一期涉及新手入门.识别数字.图像分类.词向量.情感分析.语义角色标注.机器翻译.个性化推荐. 二期会有更多的图像内容. 随便,帮国产 ...

  2. Trump就职演说

    美东时间1月20日,特朗普在美国国会大厦宣誓就职,正式成为第45任美国总统.特朗普在就职演说中说,"我们曾经致力于保卫其他国家的领地,却忽略了我们自己的领土.我们曾经将成千上万亿美元转移到海 ...

  3. V4L2驱动的移植与应用(三)

    三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...

  4. 在bmp上添加字符2

    void CTextOnbmpDlg::OnButton2() {  // TODO: Add your control notification handler code here  FILE *f ...

  5. GNU C 扩展之__attribute__ 机制简介

    在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了__attribute__相关语法及 ...

  6. R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)

    R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...

  7. 从1.5K到18K,一个程序员的5年成长之路

    原文地址:点击打开链接 168楼朋友批评的很有道理, 虚心接受. 我自己是开始学的时候已经错过了基础课的学习, 现在也是深受其苦的, 面临技术上的瓶颈, 需要花更多的时间补充这些知识. 希望看到此文的 ...

  8. Nginx 原理解析和配置摘要

    前言 Nginx 作为高性能的 http 服务器,知名度不必多言,相似产品中无出其右.本篇随笔记录我认为较为重要的原理和配置. 1. 原理解析 1.1 结构 以上是 Nginx 的结构图,其包含一个 ...

  9. Windows平台 python 常用包的安装

    1. yaml 从http://pyyaml.org/wiki/PyYAML下载对应版本的exe,直接安装就可以. 2. pip 从https://pypi.python.org/pypi/pip#d ...

  10. 关于jquery插件模板的两个案例

    /** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * ...