HarmonyOS自定义组件分页功能组件封装实例组件设计流程三、自定义组件封装必备知识点1、什么是自定义组件？组件是数据和方法的简单封装。我对组件的通俗理解是：对单个通用功能点或UI展示模块的封装。2、构建组件框架的步骤这里以js为例：第一步：在项目目录common下新建一个包名；第二步：在新建的包名目录下新建一个空文件（js\hml\css），每个文件具体做什么的就不介绍了。三个文件的名称必须相同。这个名字就是对外调用的名字，很重要。第三步：在js文件中写一个简单的结构，页面数据，在html中写一个div，在div中添加文字或者按钮。第四步：在可展示页面调用并展示新建的组件。至此，自定义组件框架已经搭建完成，是不是比较简单？后面就可以开始完善自己的组件的功能了。3、组件如何调用组件？导入：1.1.1。注意：必须在需要引用的页面顶部调用。路径和名称必须正确写入。这里的名称是组件文件的名称。页面元素加载：<**pagingcomp**class="threecomp">注意：用法与text和button相同，只是标签名变成了组件名。4.如何定义组件的入参组件的入参需要通过props来定义：/*组件可以接收的参数是setTotalnum，使用setPageount时，setTotalnum写成set-totalnum和setPageount写成set-pageount*/props:['setTotalnum','setPageount']，注意：组件内部props定义的参数和data定义的参数使用方法一样。可以直接用this.setTotalnum.5，如何从外部传入参数。pageount='10'>注意：set-totalnum,set-pageount为入参，写法必须将驼峰方法的变量拆解全部小写6，组件如何提供回调事件和绑定参数给分发回调事件（js代码）：this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});注意：yourFun是组件提供的回调方法名，{startnum:this.startnum,endnum:this.endnum}是一个参数，调用一次this.$emit()，会立即响应关联的回调方法7，如何在外部绑定回调事件并获取参数组件。一定要注意@your-fun的写法，@+内部方法驼峰反汇编全部小写，用'-'连接4.代码显示pagingcomp.jsimportdocumentfrom'@ohos.document';exportdefault{/*参数该组件可以接收setTotalnum，当使用setPageount时setTotalnum写成set-totalnumsetPageount写成set-pageount*/props:['setTotalnum','setPageount'],data:{value:"组件创建",//可外部设置记录条数totalnum:101,//总页码，内部值totalpage:0,//起始页码internalvaluestartpage:1,//当前页码的内部值curpage:1,//每页显示的记录条数，可外部设置pagecount:5,//当前页显示的记录起始ID传出参数startnum:0,//当前页显示的编号记录结束ID传出参数endnum:0,//显示的页码按钮个数itemnum:5,//对应页码按钮的状态值显示或隐藏、显示值、样式项列表：[{lshow:true,value:0,bgstyle:"three",},{lshow:true,value:0,bgstyle:"three",},{lshow:true,value:0,bgstyle:"three",},{lshow:true,value:0,bgstyle:"three",},{lshow:true,value:0,bgstyle:"three",}],},/*组件initialization*/onInit(){console.log("componentcreation")this.setAttr();},/*主动调用时组件挂载*/onAttached(){this.value="componentmount"console.log("componentmount")},/*组件移除*/onDetached(){this.value="2222"console.log("2222")},/*页面显示时自动调用*/onPageShow(){this.checkCurPage();this.checkShow();this.calcItemNum();//发布回调事件eventID"yourFun"需要写成“your-fun”this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},/*处理传入参数*/setAttr(){if(typeof(this.setTotalnum)!='undefined'){this.totalnum=this.setTotalnum;}if(typeof(this.setPageount)!='undefined'){this.pagecount=this.setPageount;}},/*检查当前页码的有效性*/checkCurPage(){this.totalpage=Math.ceil(this.totalnum/this.pagecount);if(this.curpage>this.totalpage)this.curpage=this.totalpage;if(this.totalpage<=0){this.totalpage=0;this.curpage=0;}},/*检查上下页中间按钮的显示情况*/checkShow(){for(varindex=0;index<5;index++){varisShow=this.startpage+index<=this.totalpage?true:false;this.itemlist[index].lshow=isShow;this.itemlist[index].value=this.startpage+index;if(this.startpage+index==this.curpage){this.itemlist[index].bgstyle="threeChoose";}else{this.itemlist[index].bgstyle="three";}}},/*计算选中页的起始编号*/calcItemNum(){varnstart=(this.curpage-1)*this.pagecount;nstart=(nstart<0)?0:nstart;varnend=this.curpage*this.pagecount;nend=nend>this.totalnum?this.totalnum:nend;this.startnum=nstart+1;this.endnum=nend;this.valuee="DisplayIDrange:"+this.startnum+"-"+this.endnum;},/*重新设置上一页和下一页之间的起始页码*/setStartNum(){if(this.curpage<=this.startpage||this.curpage>=this.startpage+this.itemnum-1){this.startpage=this.curpage-Math.floor(this.itemnum/2);this.startpage=this.startpage<1?1:this.startpage;}},/*上一个按钮事件*/pageUp(){this.curpage-=1;if(this.curpage<1){this.curpage=1;}this.setStartNum();this.checkShow();this.calcItemNum();this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},/*下一页按钮事件*/pageDown(){this.curpage+=1;if(this.curpage>this.totalpage){this.curpage=this.totalpage;}this.setStartNum();this.checkShow();this.calcItemNum();this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},/*主页按钮事件*/homePage(){this.curpage=1;this.setStartNum();this.checkShow();this.calcItemNum();this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},/*最后一页按钮事件*/lastPage(){this.curpage=this.totalpage;this.setStartNum();this.checkShow();this.calcItemNum();this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},/*上一页和下一页之间的按钮事件*/changeYeMa(e){this.curpage=e;this.setStartNum();this.checkShow();this.calcItemNum();this.$emit('yourFun',{startnum:this.startnum,endnum:this.endnum});},pagingcomp.hml首页上一页{{$item.value}}
