js开发12 鸿蒙的列表分页加载数据原创

noutsider

发布于 2021-2-2 11:04

浏览

1收藏

各位看官久等了,最近家里事情较多,没能及时更新.今天继续. 之前再介绍鸿蒙远程加载网络数据的时候,我说过不仅要注重用户的体验度,同时也要兼顾服务器或者页面性能的最大化.今天介绍鸿蒙的列表分页加载数据.分页加载数据无论是在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;
}

效果图如下: