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

本文主要实现数据的分页加载效果

视图及样式：

<div class="container">
    <div class="topdiv">
    </div>
    <list class="listdiv">
        <block for="{{pagedatas}}">
            <list-item class="listitemdiv">
                <text>{{$item}}</text>
            </list-item>
        </block>
        <list-item class="{{more?'morediv1':'morediv'}}" disabled="{{more}}" onclick="loadmore">
            <text>{{text}}</text>
        </list-item>
    </list>
</div>

.container {
    width: 100%;
    height: 1300px;
    display: flex;
    flex-direction: column;
}
.topdiv{
    width: 100%;
    height: 10%;
    background-color: darkgray;
}
.listdiv{
    width: 100%;
    height: 100%;
}
.listitemdiv{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
}
.morediv{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aquamarine;
}
.morediv1{
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgray;
}

效果图：

业务逻辑层：

import prompt from '@system.prompt';
export default {
    data: {
        listdatas:[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,34,35,36,37,38,39,40,
                   41,42,43,44,45],
        //当前页
        currentpage:1,

        //每页条数
        number:10,

        pagedatas:[],

        //是否还有未加载数据
        more:false,
        text:"加载更多"
    },
    onInit(){
        //this.pagedatas = this.listdatas.slice(0,10);
        this.loaddata(this.currentpage);
    },

    //点击底部加载更多触发
    loadmore(){
        ++this.currentpage;
        this.loaddata(this.currentpage);
    },

    //公共方法  加载更多
    loaddata(currentnum){
        //计算一共有多少页
        let pageNumber = this.listdatas.length%this.number==0?
                         this.listdatas.length/this.number:Math.floor(this.listdatas.length/this.number)+1;

        if(currentnum>pageNumber){
            prompt.showToast({
               message:"数据已经到底了"
            });
            this.text = "数据已经到底了";
            this.more = true;
        }else{
            this.pagedatas = this.listdatas.slice(0,currentnum*this.number);
        }
    }
}