标签：鸿蒙 huawei 认证 HarmonyOS 华为 开发者 cloud 页面 华为鸿蒙系统 浏览器

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 ++;
        }
    }

}

标签：鸿蒙,huawei,认证,HarmonyOS,华为,开发者,cloud,页面,华为鸿蒙系统,浏览器
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。