在react中引入下拉刷新和上拉加载
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中引入下拉刷新和上拉加载的更多相关文章
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...
- 使用PullToRefresh实现下拉刷新和上拉加载
使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...
- 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)
前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- IOS 开发下拉刷新和上拉加载更多
IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...
- IOS UITableView下拉刷新和上拉加载功能的实现
在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...
- 下拉刷新和上拉加载 Swift
转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
随机推荐
- PaddlePaddle︱开发文档中学习情感分类(CNN、LSTM、双向LSTM)、语义角色标注
PaddlePaddle出教程啦,教程一部分写的很详细,值得学习. 一期涉及新手入门.识别数字.图像分类.词向量.情感分析.语义角色标注.机器翻译.个性化推荐. 二期会有更多的图像内容. 随便,帮国产 ...
- Trump就职演说
美东时间1月20日,特朗普在美国国会大厦宣誓就职,正式成为第45任美国总统.特朗普在就职演说中说,"我们曾经致力于保卫其他国家的领地,却忽略了我们自己的领土.我们曾经将成千上万亿美元转移到海 ...
- V4L2驱动的移植与应用(三)
三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...
- 在bmp上添加字符2
void CTextOnbmpDlg::OnButton2() { // TODO: Add your control notification handler code here FILE *f ...
- GNU C 扩展之__attribute__ 机制简介
在学习linux内核代码及一些开源软件的源码(如:DirectFB),经常可以看到有关__attribute__的相关使用.本文结合自己的学习经历,较为详细的介绍了__attribute__相关语法及 ...
- R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)
R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...
- 从1.5K到18K,一个程序员的5年成长之路
原文地址:点击打开链接 168楼朋友批评的很有道理, 虚心接受. 我自己是开始学的时候已经错过了基础课的学习, 现在也是深受其苦的, 面临技术上的瓶颈, 需要花更多的时间补充这些知识. 希望看到此文的 ...
- Nginx 原理解析和配置摘要
前言 Nginx 作为高性能的 http 服务器,知名度不必多言,相似产品中无出其右.本篇随笔记录我认为较为重要的原理和配置. 1. 原理解析 1.1 结构 以上是 Nginx 的结构图,其包含一个 ...
- Windows平台 python 常用包的安装
1. yaml 从http://pyyaml.org/wiki/PyYAML下载对应版本的exe,直接安装就可以. 2. pip 从https://pypi.python.org/pypi/pip#d ...
- 关于jquery插件模板的两个案例
/** * jquery tips 提示插件 jquery.tips.js v0.1beta * * 使用方法 * $(selector).tips({ //selector 为jquery选择器 * ...