这是一篇关于<强> LIstView实现动态数据渲染强的文章!,
首先我们讲讲数据是如何来规划的一般情况下我们有两种规划方案
前提比如我们数据是100条+
<强>第一:一次性把100条数据取过来然后由前端JS代码来做分页处理(如每次渲染10条)
<强>第二:在服务器端做处理通过& # 63;页面=n的方式每次需要第几页数据就拿第几页的数据
<>强利弊
第一种方案的优点是一次性把数据全部载入完成如果数据量很大的情况下可能会有很长的加载时间但是对于服务端的压力就会减少请求次数
第二种方案的优点是分批载入数据数据量相对小对于初始化的时候载入时间很快缺点也很明显(如100条数据每次显示10那么就需要访问10此服务器增加请求次数)
其实这两种都是不错的方案具体用什么方案来处理数据根据自己的项目和需求来决定
本例子中因为数据不是很多我们就用第一种方案吧
我们拿上一篇的例子来做改动吧
构造函数(道具){
超级(道具);
这一点。ds=新视图。数据源({rowHasChanged: (r1, r2)=比;r1 !==r2});
这一点。状态={
数据源:this.ds,
}
这一点。listData=https://www.yisu.com/zixun/null;//数据源
这一点。len=零;//数据的个数
这一点。数=零;//当前数据总页数
这一点。页大?10;//每次渲染的个数
这一点。页面=0;//当前页数
}
之前
变量全部定好以后我们来载入数据并给变量赋值如下:
componentDidMount () {
fetch (http://ued.yihaodian.com: 3001/api/70)
不要犹豫((响应)=比;response.json ())
不要犹豫((数据)=比;{
这一点。listData=https://www.yisu.com/zixun/data.listData;
这一点。len=this.listData.length;
这一点。数=Math.ceil(这一点。len/this.pageSize);
this.setState ({
数据源:this.ds.cloneWithRows (this.setData ())
}）
}）
.done ();
}
之前
this.setData()返回要渲染的数据这里要做一些处理
setData () {
让num=Ｒ趁? this.pageSize;//获取要渲染的个数
如果num> this.len num=this.len;//如果到最后一页num大于len那么num等于len防止空数据
让数据=https://www.yisu.com/zixun/[];
(让我=0;我之前
最关键的一步到了我们之所以能动态渲染的核心还是ListView组件提供的onEndReached方法需要深入了解可以到官方去看下详细说明
//当列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用
onEndReached={this.onEnd.bind ()}
之前
看下竖着的处理
竖着(){//如果page<数那么我们让页面+ +重新设置的数据源
如果这一点。页& lt;this.count) {
this.page + +;
如果(this.setData ()。长度比;0){//防止重复渲染
this.setState ({
数据源:this.ds.cloneWithRows (this.setData ())
}）
}
其他}{
console.log(“已经是最后一页了');
返回错误;
}
}
之前
最后就是渲染部分了
呈现(){
回报(
& lt;列表视图
风格={{高度:Dimensions.get(“窗口”).height - 109}}
数据源={this.state.dataSource}
renderRow={this.rendList}
alt=" ListView实现下拉动态渲染数据">
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
