欢迎讨论欢迎一起学习:微信jkxx123321

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


首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案
前提比如我们数据是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等类似组件最好是设置一个尺寸 来配合整体页面的布局
效果:

aaa.gif

ListView实现下拉动态渲染数据的更多相关文章

  1. (转)如何获得当前ListVIew包括下拉的所有数据?

    ListView listView = activity.getListView();获取的仅仅是当前屏幕显示的list,但是具有下拉信息,不在当前屏幕,但是下拉显示的数据无法或得到.谁知道如何获得当 ...

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

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

  3. ListView实现下拉刷新(三)实现下拉刷新

    该准备的东西都已经准备好了.在这篇文章里,我们就开始实现下拉刷新功能吧. 一.大体的逻辑分析 我们来简单分析一下需要做的逻辑吧.首先分析头布局有几种状态.不下拉时,为正常状态,此时头布局隐藏.下拉到一 ...

  4. ListView实现下拉刷新(一)建立头布局

    一.效果演示 ListView实现下拉刷新,是很常见的功能.下面是一个模拟的效果,如下图:                                   效果说明:当往下拉ListView的时候 ...

  5. iscroll5 上拉,下拉 加载数据

    我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...

  6. Android UI--自定义ListView(实现下拉刷新+加载更多)

    Android UI--自定义ListView(实现下拉刷新+加载更多) 关于实现ListView下拉刷新和加载更多的实现,我想网上一搜就一堆.不过我就没发现比较实用的,要不就是实现起来太复杂,要不就 ...

  7. Python+selenium之获取文本值和下拉框选择数据

    Python+selenium之获取文本值和下拉框选择数据 一.结合实例进行描述 1. 实例如下所示: #新增标签操作 def func_labels(self): self.driver.find_ ...

  8. Layui下拉选渲染

    下拉选渲染有很多方式,这个比较简单,记录一下: HTML代码如下: <div class="layui-input-inline"> <input type=&q ...

  9. Html5+Mui前端框架,开发记录(四):下拉菜单绑定数据、搜索、时间控件

    1.下拉菜单绑定数据,选择后回传值 1)html: <div class="mui-input-row"> <label>xxx:</label> ...

随机推荐

  1. Linux 磁盘告警分析

    硬件配置 cat /etc/redhat-release && dmidecode -s system-product-name && cat /proc/cpuinf ...

  2. laravel5实现第三方登录(微信)

    背景 最近手头一个项目需要实现用户在网站的第三方登录(微信和微博),后端框架laravel5.4. 实现过程以微信网页版第三方登录,其他于此类似,在此不做重复. 准备工作 网站应用微信登录是基于OAu ...

  3. Oracle.ManagedDataAccess 提示ORA-01017 错误【解决方案】

    Oracle.ManagedDataAccess 提示ORA-01017 错误[解决方案] Oracle.ManagedDataAccess 提示ORA-01017 错误[解决方案] [HKEY_LO ...

  4. 安尼泰科T1行车记录仪说明书

    点击下载:安尼泰科T1行车记录仪说明书 自己总结:行车记录仪_使用总结.rar PS:我的型号是T1C,但说明书也适合.

  5. rest规范是什么?

    请参考这篇文章,每一个回答者侧重点不同,但都十分精彩 https://www.zhihu.com/question/28557115

  6. PostgreSQL Json字段作为查询条件案例

    业务扩展字段在数据库中经常会使用json格式的数据来存储,这就涉及到一个头疼的问题,假设要使用扩展字段里的某个值作为查询条件怎么办,原来PostgreSQL本身就支持这种查询方式. 例子:假设业务扩展 ...

  7. 《Kubernetes权威指南》——入门

    1 Hello World 1.1 概述 搭建一个Web留言板应用,采用PHP+Redis. Redis由一个master提供写和两个slave提供读. PHP构成的前端Web层由三个实例构成集群,访 ...

  8. 模型评估——ROC、KS

    无论是利用模型对信用申请人进行违约识别,还是对授信申请人进行逾期识别……在各种各样的统计建模中,永远必不可少的一步是对模型的评价,这样我们就可以根据模型评价指标的取值高低,来决定选取哪个模型.本篇主要 ...

  9. Spring Framework简介

    作者关于此主题早期文章 Spring框架快速入门 起源 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层 ...

  10. FFmpeg封装格式处理2-解复用例程

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10506642.html FFmpeg封装格式处理相关内容分为如下几篇文章: [1]. F ...