【鸿蒙生态第二节课#2】数据读取分页浏览实现

1. 首先使用for循环创建数据 for (let i = 1; i <= 51; i++) { this.arrdatas.push("第"+i+"项"); }
2. 设置data数据 arrdatas:[],//存放所有数据 listdata:[], //每次存放10条数据 currentpage:1,//表示页数，第一页 loadtext:"加载更多", //储存加载按钮文本，方便更改 flag:false, //数据加载完毕标志 同时影响hml中disable属性,影响显示更多的点击 设置每页浏览常量 const PAGE_NUM = 10;//每页条数 常量
3. 再使用使用js原生API方法 slice()实现分页 slice(startnum开始标记数字,endnum结束标记数字) 分页的意义：一次性加载过多数据影响页面渲染性能 在用户角度：浏览信息不需要全部，有需要再增加 //slice是截取数据，并没有删除 this.listdata = this.arrdatas.slice(0,this.currentpage*PAGE_NUM); //截取每页的项 console.log(this.listdata); console.log(this.arrdatas);
4. 设置加载更多函数 页面数自增 this.currentpage ++;//增加页面数，换下一页 提示用户加载的页数 prompt.showToast({ message:"加载的是第: "+this.currentpage+" 页" }); 计算总页数判断需要加载的页数 console.log(this.arrdatas.length)//得到数据总条数 let maxSize = this.arrdatas.length/PAGE_NUM; console.log("总页数："+maxSize); 能够得到总页数，但有局限性，无法处理小数情况 修改后 let maxSize = this.arrdatas.length%PAGE_NUM == 0 ? this.arrdatas.length/PAGE_NUM:parseInt(this.arrdatas.length/PAGE_NUM)+1; console.log("总页数："+maxSize); 先判断是否为小数，三元运算符区分，不为小数直接取，为小数则取整加一 保证所有数据能够为完整显示 判断是否加载完毕 if(this.currentpage > maxSize){ prompt.showToast({ message:"所有数据加载完毕", }); this.loadtext = "数据已经加载完毕"; this.flag = true; console.log("已全部加载完毕"); } else{ this.listdata = this.arrdatas.slice(0,this.currentpage*PAGE_NUM); } 加载完成给予提示，且设置flag为true，加载按钮不可再点击 未完成则继续加载
5. 成果
6. 优化 实现形式是点击加载更多后加载后方页面的数据 优化后只显示对应页面中的数据 设定起始加载项 startindex:1,//设定加载的起始项 页面展示更改 this.listdata = this.arrdatas.slice(this.startindex-1,this.currentpage*PAGE_NUM); 加载更多数据更改 else{ this.listdata = this.arrdatas.slice(this.startindex*PAGE_NUM,this.currentpage*PAGE_NUM); this.startindex ++; } 效果

7.整体js代码

import prompt from @system.prompt;
const PAGE_NUM = 10;//每页条数 常量
export default {
          
   
    data: {
          
   
        arrdatas:[],
        listdata:[], //每次存放10条数据
        currentpage:1,//表示页数，第一页
        loadtext:"加载更多", //储存加载按钮文本，方便更改
        flag:false, //数据加载完毕标志 同时影响hml中disable属性,影响显示更多的点击
        startindex:1,//设定加载的起始项
    },
    onInit(){
          
   
        //初始化100条数据
        for (let i = 1; i <= 51; i++) {
          
   
            this.arrdatas.push("第"+i+"项");
        }
        //分页：一次性加载过多数据影响页面渲染性能 在用户角度浏览信息不需要全部，有需要再增加
        //使用js原生API方法 slice(startnum开始标记数字,endnum结束标记数字)

        this.listdata = this.arrdatas.slice(this.startindex-1,this.currentpage*PAGE_NUM);
        console.log(this.listdata);
        console.log(this.arrdatas);
    },
    loadmore(){
          
   
        this.currentpage ++;//增加页面数，换下一页
        console.log("现在在第"+this.currentpage+"页");
        prompt.showToast({
          
   
            message:"加载的是第: "+this.currentpage+" 页"
        });
//        console.log(this.arrdatas.length)//得到数据总条数
//        let maxSize = this.arrdatas.length/PAGE_NUM;
//        console.log("总页数："+maxSize);
        //得到总页数，但有局限性，没考虑除出小数的情况

        let maxSize = this.arrdatas.length%PAGE_NUM == 0 ?
        this.arrdatas.length/PAGE_NUM:parseInt(this.arrdatas.length/PAGE_NUM)+1;
        console.log("总页数："+maxSize);
        //先判断是否为小数，三元运算符区分，不为小数直接取，为小数取整加一
        //保证所有数据能够为完整显示
        //程序的健壮性

        if(this.currentpage > maxSize){
          
   
            prompt.showToast({
          
   
                message:"所有数据加载完毕",
            });
            this.loadtext = "数据已经加载完毕";
            this.flag = true;
            console.log("已全部加载完毕");
        }
        else{
          
   
            this.listdata = this.arrdatas.slice(this.startindex*PAGE_NUM,this.currentpage*PAGE_NUM);
            this.startindex ++;
        }
    }

}