2、鸿蒙分页和加载数据

cjd_d_

已于 2022-05-17 23:25:29 修改

阅读量246

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-05-17 23:24:33 首次发布

本文链接：https://blog.csdn.net/cjd_d_/article/details/124832793

版权

这个博客展示了如何使用HTML、CSS和JavaScript实现一个前端数据加载和分页的功能。通过循环遍历数据列表，动态创建内容视图，并利用固定底部的操作栏进行加载更多操作。当达到数据末尾时，更新加载按钮状态并显示提示信息。

摘要由CSDN通过智能技术生成

html

<div class="container">
    <div class="contentview">
        <block for="{{listdata}}">
            <div class="lineview">
                <text>{{$item}}</text>
            </div>
        </block>
    </div>
    <div class="operatorview" onclick="loadmore" disabled="{{flag}}">
        <text>{{loadtext}}</text>
    </div>
</div>

css

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.contentview {
    display: flex;
    overflow: scroll;
    width: 100%;
    flex-direction: column;
}

.lineview {
    width: 100%;
    height: 10%;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: blue;
}

.operatorview {
    height: 35vp;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: yellow;
    display: flex;
    justify-content: center;
    align-items: center;
}

listdata:[],//每次存放10条数据
//使用JavaScript原生api方法 Slice(startnum , endnum)截取十条数据
this.listdata = this.arrs.slice(0,this.currentpage*PAGE_NUM);
js

import prompt from '@system.prompt';
const PAGE_NUM=10;
export default {
    data: {
        arrs:[],
        listdata:[],
        currentpage:1,
        loadtext:"加载更多",
        flag:false,
    },
    onInit(){
        for(let i=0;i<50;i++){
            this.arrs.push("第"+i+"项");
        }
        this.listdata = this.arrs.slice(0,this.currentpage*PAGE_NUM);
    },
    loadmore(){
    this.currentpage ++;
    prompt.showToast({
        message:"加载的是第"+this.currentpage+"页"
    })

    let maxSize = this.arrs.length%PAGE_NUM == 0 ?
     this.arrs.length/PAGE_NUM:parseInt(this.arrs.length/PAGE_NUM)+1;
    console.log("总共"+this.arrs.length+"页");
    
    if (this.currentpage > maxSize) {
        prompt.showToast({
            message:"没有更多数据了"
        })

        this.loadtext = '已经到底了';
        this.flag = true;
    }
    else{
        this.listdata = this.arrs.slice(0,this.currentpage*PAGE_NUM)
    }
    }
}

在这里插入图片描述