欢迎讨论欢迎一起学习:微信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. 干货:教你如何监控 Java 线程池运行状态

    之前写过一篇 Java 线程池的使用介绍文章<线程池全面解析>,全面介绍了什么是线程池.线程池核心类.线程池工作流程.线程池分类.拒绝策略.及如何提交与关闭线程池等. 但在实际开发过程中, ...

  2. ELKstack简介及环境部署

    ELK工作流程图 环境准备 安装Logstash依赖包JDK Logstash的运行依赖于Java运行环境, Logstash 1.5以上不低于java 7推荐使用最新版本的Java.由于只是运行Ja ...

  3. Python模块学习 - Paramiko

    简介 ssh是一个协议,OpenSSH是其中一个开源实现,paramiko是Python的一个库,实现了SSHv2协议(底层使用cryptography). 有了Paramiko以后,我们就可以在Py ...

  4. html css 其他常用 onclick跳转

    opacity: 0.5. 0-1 透明度 cursor: pointer;手指 clear:both 清楚浮动 我是医生不是人 文本内容超出框word-wrap:break-word; word-b ...

  5. DDD实战进阶第一波(四):开发一般业务的大健康行业直销系统(搭建支持DDD的轻量级框架三)

    上一篇文章我们讲了经典DDD架构对比传统三层架构的优势,以及经典DDD架构每一层的职责后,本篇文章将介绍基础结构层中支持DDD的轻量级框架的主要代码. 这里需要说明的是,DDD轻量级框架能够体现DDD ...

  6. Eclipse创建web项目目录结构

    效果图如下: 0 新建Web项目 1.右击项目MyProject进入Java Build Path 2. 点击Add Folder按钮,进入如下界面 3.选择src,点击Add New Folder按 ...

  7. 【Eclipse】添加builder实现NDK的自动编译

    最近在做NDK相关的东西,Eclipse里面java的自动编译很方便,每次改动后就能自己编译显示错误,而NDK的C/C++文件就需要保存后再手动点build. 研究了下发现java code的自动编译 ...

  8. 读vue-0.6-text-parser.js源码

    提取字符串中的表达式 var BINDING_RE = /\{\{(.+?)\}\}/; function parse(text) { // 找不到返回null if (!BINDING_RE.tes ...

  9. mysql查找一个字段属于哪个表

    查询mid字段存在于哪个表中 SELECT TABLE_SCHEMA,TABLE_NAME FROM information_schema.`COLUMNS` WHERE COLUMN_NAME='m ...

  10. Rails项目防止时序攻击

    时序攻击属于侧信道攻击/旁路攻击(Side Channel Attack),侧信道攻击是指利用信道外的信息,比如加解密的速度/加解密时芯片引脚的电压/密文传输的流量和途径等进行攻击的方式,一个词形容就 ...