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

效果图:

鸿蒙js开发12 鸿蒙列表的分页加载数据-鸿蒙开发者社区

鸿蒙js开发12 鸿蒙列表的分页加载数据-鸿蒙开发者社区

 

业务逻辑层:

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条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

如果能把源代码打个包作为附件,那就更好啦^_^

回复
2021-1-30 19:13:06
回复
    相关推荐