广告
返回顶部
首页 > 资讯 > 精选 >ListView实现下拉动态渲染数据
  • 551
分享到

ListView实现下拉动态渲染数据

listview下拉渲染数据 2023-05-31 01:05:44 551人浏览 八月长安
摘要

这是一篇关于LIstView实现动态数据渲染的文章! 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+第一:一次性把100条数据fetch过来 然后由前端js代码来做分页处理(如每次渲染10

这是一篇关于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; //当前页数}

--结束END--

本文标题: ListView实现下拉动态渲染数据

本文链接: https://www.lsjlt.com/news/222796.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作