【鸿蒙生态第二节课#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 ++; }    }}