【鸿蒙生态第二节课#2】数据读取分页浏览实现
2022/10/20 5:25:02
本文主要是介绍【鸿蒙生态第二节课#2】数据读取分页浏览实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
- 首先使用for循环创建数据 for (let i = 1; i <= 51; i++) { this.arrdatas.push("第"+i+"项"); }
- 设置data数据 arrdatas:[],//存放所有数据 listdata:[], //每次存放10条数据 currentpage:1,//表示页数,第一页 loadtext:"加载更多", //储存加载按钮文本,方便更改 flag:false, //数据加载完毕标志 同时影响hml中disable属性,影响显示更多的点击 设置每页浏览常量 const PAGE_NUM = 10;//每页条数 常量
- 再使用使用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);
- 设置加载更多函数 页面数自增 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,加载按钮不可再点击 未完成则继续加载
- 成果
- 优化 实现形式是点击加载更多后加载后方页面的数据 优化后只显示对应页面中的数据 设定起始加载项 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 ++; } } }
这篇关于【鸿蒙生态第二节课#2】数据读取分页浏览实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了