
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
各位看官久等了,最近家里事情较多,没能及时更新.今天继续. 之前再介绍鸿蒙远程加载网络数据的时候,我说过不仅要注重用户的体验度,同时也要兼顾服务器或者页面性能的最大化.今天介绍鸿蒙的列表分页加载数据.分页加载数据无论是在PC端还是移动端应用都很广泛.
分页加载的好处如下:
(1)无论是本地数据还是网络数据,分页加载都会减轻前端加载负荷,提升页面的执行性能,带来良好的用户体验
例如,有100条数据等待加载,但是第10条数据就是用户所需要的信息,若是100条数据一下全部加载出来,后面加载的90条就是做的无用功.还会造成页面卡顿的现象,体验度大大减低.
(2)若是从网络端加载数据,可以减轻服务器的传输压力.
具体代码如下:(关键部分已经标注)
js业务逻辑层:
export default {
data: {
title: 'World',
listitem3:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33],
//当前页数
currentnum:1,
fixnum:5,
//分页的数据结果集
pagelist:[],
text:"加载更多", //默认
flag:false
},
//页面初始化
onInit(){
this.showData(this.currentnum)
},
loadview(){
//加载后面十条
++this.currentnum; //当前页码加1后传递给showData
//调用分页
this.showData(this.currentnum);
},
showData(curnum){
//用三元运算符判断一下数据页数是否到底 到底后显示 我是有底线的
let pagesize=this.listitem3.length%this.fixnum==0?this.listitem3.length/this.fixnum:Math.floor(this.listitem3.length/this.fixnum)+1
if(curnum>pagesize){
this.text="我是有底线的";
this.flag=true;
}
else{
this.pagelist=this.listitem3.slice(0,curnum*this.fixnum);
}
}
}
视图渲染层:
<div class="container">
<div class="topview">
</div>
<div class="contentview">
<list class="list">
<block for="{{pagelist}}">
<list-item class="listitem">
<text class="txt1">{{$item}} </text>
</list-item>
</block>
<list-item>
<div class="{{flag?'lastview1':'lastview'}}" disabled="{{flag}}" onclick="loadview">
<text class="txt2">{{text}}</text>
</div>
</list-item>
</list>
</div>
<div class="bottomview">
</div>
</div>
css属性设置:
.container {
width: 100%;
height: 1500px;
display: flex;
flex-direction: column;
}
.topview{
width: 100%;
height: 10%;
background-color: orange;
position: fixed;
left: 0px;
top: 0px;
}
.bottomview{
width: 100%;
height: 10%;
background-color: orange;
position: fixed;
left: 0px;
bottom: 0px;
}
.list{
width: 100%;
height: 100%;
}
.contentview{
width: 100%;
height: 90%;
}
.listitem{
width: 100%;
height: 15%;
border-bottom:3px solid slategray;
display: flex;
justify-content: center;
align-items: center;
}
.txt1{
font-weight: bold;
font-size: 45px;
font-weight: bold;
}
.lastview{
width: 100%;
height: 20%;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.lastview1{
width: 100%;
height: 20%;
background-color: grey ;
display: flex;
justify-content: center;
align-items: center;
}
.txt2{
font-weight: bold;
font-size: 45px;
font-weight: bold;
color: white;
}
效果图如下:
欢迎读者朋友订阅我的专栏:[HarmonyOS开发从0到1]
https://harmonyos.51cto.com/column/35