鸿蒙开发-分页和加载数据的实现

最新推荐文章于 2024-10-21 12:45:55 发布

晚向大魔王

最新推荐文章于 2024-10-21 12:45:55 发布

阅读量396

点赞数 1

文章标签：鸿蒙

本文链接：https://blog.csdn.net/beargrey/article/details/124817841

版权

本文介绍了在鸿蒙开发中如何实现分页加载数据的详细过程，通过实例展示了CSS部分的关键代码，帮助开发者理解在鸿蒙平台上进行高效数据展现的方法。

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

首先先上预览图

具体实现看代码，思考与实现过程我都写在注释里了
js部分

import prompt from '@system.prompt';
const PAGE_NUM=10;
export default {
    data: {
        arrs:[],
        listdata:[],//每次存放10条数据
        currentpage:1,
        loadtext:"加载更多",
        flag:false,
    },
    onInit(){
        for(let i=0;i<50;i++){
            this.arrs.push("第"+i+"项");//使用for循环录入数据
        }
        //使用JavaScript原生api方法 Slice(startnum , endnum)截取十条数据
        this.listdata = this.arrs.slice(0,this.currentpage*PAGE_NUM);
    },
    loadmore(){
    this.currentpage ++;
        //使用prompt弹出提示信息
    prompt.showToast({
        message:"加载的是第"+this.currentpage+"页"