ListView实现下拉动态渲染数据

这是一篇关于LIstView实现动态数据渲染的文章!

首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案
前提比如我们数据是100条+

第一:一次性把100条数据fetch过来 然后由前端JS代码来做分页处理(如每次渲染10条)

第二:在server端做处理通过?page=n的方式 每次需要第几页数据就fetch第几页的数据

利弊

第一种方案的优点是 一次性把数据全部载入完成 如果数据量很大的情况下可能会有很长的loading时间 但是对于服务端的压力就会减少请求次数

第二种方案的优点是 分批载入数据 数据量相对小 对于初始化的时候载入时间很快 缺点也很明显 (如100条数据 每次显示10 那么就需要访问10此服务器 增加请求次数)

其实这两种都是不错的方案 具体用什么方案来处理数据 根据自己的项目和需求来决定

本例子中 因为数据不是很多 我们就用第一种方案吧

我们拿上一篇的例子来做改动吧

constructor(props) {
 super(props);

 this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 this.state = {
  dataSource:this.ds,
 }

 this.listData = null; //数据源
 this.len = null; //数据的个数
 this.count = null; //当前数据总页数
 this.pageSize = 10; //每次渲染的个数
 this.page = 0; //当前页数
}

变量全部定好以后 我们来载入数据 并给变量赋值如下:

componentDidMount() {
 fetch('http://ued.yihaodian.com:3001/api/70')
  .then((response) => response.json())
  .then((data) => {
  this.listData = data.listData;
  this.len = this.listData.length;
  this.count = Math.ceil(this.len / this.pageSize);

  this.setState({
   dataSource:this.ds.cloneWithRows(this.setData())
  })
  })
  .done();
}

this.setData() 返回要渲染的数据 这里要做一些处理

setData(){
 let num = this.page * this.pageSize; //获取要渲染的个数
 if(num>this.len) num = this.len; //如果到最后一页 num 大于 len 那么num等于len 防止空数据

 let data = [];
 for(let i=0;i<num;i++){
  data.push(this.listData[i]);
 }
 return data;
}

最关键的一步到了 我们之所以能动态渲染的核心 还是ListView组件提供的onEndReached方法 需要深入了解 可以到官方去看下详细说明

//当列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用
onEndReached = {this.onEnd.bind(this)}

看下onEnd的处理

onEnd(){
 //如果page<count 那么我们让page++ 重新设置dataSource
 if(this.page < this.count){
  this.page++;
  if(this.setData().length > 0){ //防止重复渲染
  this.setState({
   dataSource:this.ds.cloneWithRows(this.setData())
  })
  }
 }else{
  console.log('已经是最后一页了');
  return false;
 }
}

最后就是渲染部分了

render() {
 return (
  <ListView
   style={{height:Dimensions.get('window').height-109}}
   dataSource={this.state.dataSource}
   renderRow={this.rendList}
   onEndReached={this.onEnd.bind(this)}
   onEndReachedThreshold={0}
   enableEmptySections={true} />
 );
}

坑点

坑点1

官方也说过的 当第一次渲染时,如果数据不足一屏(比如初始值是空的),这个事件也会被触发

坑点2

onEndReachedThreshold的使用 如果不设置会导致一些莫名其妙的情况 上面的例子设置的是0 意思是正好拖到底部就触发
如果是100那么就是距离底部100的位置触发
还有个好玩的 如果是-100 那么就必须拉到底部 再往上拉100PX的距离再触发事件(这里我们是不是想到 可以做一个很吊的功能啊 自己想啊..)

坑点3

enableEmptySections中文文档里面居然没有这个属性 害的我去找官网找(E文不好啊)所以以后要多看看官方的

Warning: In next release empty section headers will be rendered. In this release you can use 'enableEmptySections' flag to render empty section headers.
如果你在用的时候报这个错 那么就是这个属性了 设置一下enableEmptySections = {true}

坑点4

ListView、ScrollView等类似组件最好是设置一个尺寸 来配合整体页面的布局

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-06-17

android开发教程之实现listview下拉刷新和上拉刷新效果

复制代码 代码如下: public class PullToLoadListView extends ListView implements OnScrollListener { private static final String TAG = PullToLoadListView.class.getSimpleName(); private static final int STATE_NON = 0; private static final int STATE_PULL_TO_REFRE

Android仿XListView支持下拉刷新和上划加载更多的自定义RecyclerView

首先给大家展示下效果图,感觉还不错,请继续往下阅读: 下拉刷新:        上划加载        在项目更新的过程中,遇到了一个将XListView换成recyclerView的需求,而且更换完之后大体效果不能变,但是对于下拉刷新这样的效果,谷歌给出的解决方案是把RecyclerView放在一个SwipeRefreshLayout中,但是这样其实是拉下一个小圆形控件实现的,和XListView的header效果不同.在网上找了很多的别人代码,都没有实现我想要的效果,于是自己动手写了一个.

android下拉刷新ListView的介绍和实现代码

大致上,我们发现,下拉刷新的列表和一般列表的区别是,当滚动条在顶端的时候,再往下拉动就会把整个列表拉下来,显示出松开刷新的提示.由此可以看出,在构建这个下拉刷新的组件的时候,只用继承ListView,然后重写onTouchEvent就能实现.还有就是要能在xml布局文件中引用,还需要一个参数为Context,AttributeSet的构造函数. 表面上的功能大概就这些了.另一方面,刷新的行为似乎还没有定义,在刷新前做什么,刷新时要做什么,刷新完成后要做什么,这些行为写入一个接口中,然后让组件去实

Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)

好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下: 通过观察QQ空间的运行效果,发现当往上滚动时菜单

Android Listview上下拉动刷新tab滑动切换功能

近期要做一个含有两个tab切换页面,两个页面有公共的描述信息区域,两个tab都是listview,可以向上或向下拉动刷新,在页面中部有一个tab切换区域,向上滑动的时候tab区域到顶部后就不在移动,向下拉又重新回到初始位置,先看一样样式图吧! 整个需求大致如上图所示,其中上拉刷新和下拉刷新没有截图,采用了开源控件PullToRefreshListView来实现这个效果. 1.总体思路,为了简单不想监控很多手势问题,因此投机取巧的采用下面的方式来实现, a.  整个页面是一个listview,公共

Android实现上拉加载更多以及下拉刷新功能(ListView)

首先为大家介绍Andorid5.0原生下拉刷新简单实现. 先上效果图: 相对于上一个19.1.0版本中的横条效果好看了很多.使用起来也很简单. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" and

Android ListView下拉刷新上拉自动加载更多DEMO示例

代码下载地址已经更新.因为代码很久没更新,已经很落伍了,建议大家使用RecyclerView实现. 参考项目: https://github.com/bingoogolapple/BGARefreshLayout-Android https://github.com/baoyongzhang/android-PullRefreshLayout 下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的And

Android下拉刷新ListView——RTPullListView(demo)

下拉刷新在越来越多的App中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉.在交互习惯上已经形成定性.之前在我的文章<IOS学习笔记34-EGOTableViewPullRefresh实现下拉刷新>中介绍过如何在IOS上实现下拉刷新的功能.今天主要介绍下在Android上实现下拉刷新的Demo,下拉控件参考自Github上开源项目PullToRefresh,并做简单修改.最终效果如下:                         工程结构如下: 使用过程中

Android ListView实现上拉加载更多和下拉刷新功能

本文实例为大家介绍了Android ListView下拉刷新功能的实现方法和功能,供大家参考,具体内容如下 1.ListView优化方式 界面缓存:ViewHolder+convertView 分页加载:上拉刷新 图片缓存 快速滑动ListView禁止刷新 2.效果 3.上拉加载更多原理及实现 当我们手指滑动到listview最后位置的时候,我们触发加载数据的方法.这触发之前我们需要做一些工作,包括: 如何判断滑动到最后? 如何避免重复加载数据? 加载之后如何刷新界面? 1).界面实现AbsLi

Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro

Android下拉刷新上拉加载控件(适用于所有View)

前面写过一篇关于下拉刷新控件的文章下拉刷新控件终结者:PullToRefreshLayout,后来看到好多人还有上拉加载更多的需求,于是就在前面下拉刷新控件的基础上进行了改进,加了上拉加载的功能.不仅如此,我已经把它改成了对所有View都通用!可以随心所欲使用这两个功能~~ 我做了一个大集合的demo,实现了ListView.GridView.ExpandableListView.ScrollView.WebView.ImageView.TextView的下拉刷新和上拉加载.后面会提供demo的

Android开发ListView中下拉刷新上拉加载及带列的横向滚动实现方法

ListView 控件可使用四种不同视图显示项目.通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本. 可使用 ListView 控件将称作 ListItem 对象的列表条目组织成下列四种不同的视图之一:1.大(标准)图标2.小图标3.列表4.报表 View 属性决定在列表中控件使用何种视图显示项目. 还可用 LabelWrap 属性控制列表中与项目关联的标签是否可换行显示.另外,还可管理列表中项目的排序方法和选定项目的外观. 相信有很人做的项目估计都用的到这个.就是List

React Native 自定义下拉刷新上拉加载的列表的示例

在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的

Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多

最近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多. 新浪微博就是使用这种方式的典型. 当用户从网络上读取微博的时候,如果一下子全部加载用户未读的微博这将耗费比较长的时间,造成不好的用户体验,同时一屏的内容也不足以显示如此多的内容.这时候,我们就需要用到另一个功能,那就是listview的分页了,其实这个分页可以做成客户端的分页,也可以做成服务器端的分页(点击加载时,从服务器对应的加载第N页就好了!!!).通过分

react-native ListView下拉刷新上拉加载实现代码

本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List

android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多

本文实例为大家分享了Android实现ListView下拉刷新上拉加载更多的具体代码,供大家参考,具体内容如下 其实谷歌官方目前已经推出ListView下拉刷新框架SwipeRefreshLayout,想了解的朋友可以点击 android使用SwipeRefreshLayout实现ListView下拉刷新上拉加载了解一下: 大家不难发现当你使用SwipeRefreshLayout下拉的时候布局文件不会跟着手势往下滑,而且想要更改这个缺陷好像非常不容易. 虽然SwipeRefreshLayout非

android使用SwipeRefreshLayout实现ListView下拉刷新上拉加载

本文实例为大家分享了android实现ListView下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 这次使用的是系统的SwipeRefreshLayout实现下拉刷新,和设置ListView的滑动监听判断是否滑动到最底部然后加载更多: 这个要比PullToRefreshListView简单很多,想PullToRefreshListView实现下拉刷新上拉加载的可以看这篇博客: android使用PullToRefresh框架实现ListView下拉刷新上拉加载更多 至于使用哪一种大家可以

ASP.NET中 ListBox列表框控件的使用方法

ListBox 控件允许用户从预定义的列表中选择一个或多个项.它与 DropDownList 控件的不同之处在于,它不但可以一次显示多个项,而且(可选)还允许用户选择多个项. 一.属性 属性 值 作用 SelectionMode Single|Multiple 列表选择模式:单选|多选 Selected False|True 是否为选中状态 二.示例 ListBox.aspx 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&q