成都网站建设设计

将想法与焦点和您一起共享

ListView实现下拉动态渲染数据-创新互联

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

成都创新互联自2013年起,先为塔什库尔干塔吉克等服务建站,塔什库尔干塔吉克等地企业,进行企业商务咨询服务。为塔什库尔干塔吉克企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案
前提比如我们数据是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; //当前页数
}


当前文章:ListView实现下拉动态渲染数据-创新互联
当前网址:http://chengdu.cdxwcx.cn/article/cdehic.html