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

lsfzzf

发布于 2021-1-30 19:03

浏览

0收藏

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

视图及样式：

<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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

.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;
}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.

效果图：

业务逻辑层：

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);
        }
    }
}
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.
46.