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