HarmonyOS自定义组件之分页功能组件封装实例

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

一、分页组件效果展示

二、分页组件设计流程

三、自定义组件封装必备知识点

1，何谓自定义组件

组件是对数据和方法的简单封装。个人对组件的通俗理解是：对单独的某个通用功能点或UI显示模块的封装。

2，组件框架搭建步骤

此处以js为例：

在工程目录的common下新建一个包名;

在新建的包名目录下新建新的空文件(js\hml\css)，每个文件具体做啥就不一一介绍了，三个文件的名字一定要一样，这个名字就是外部调用的名字了，非常重要。

js文件写好简单结构，页面数据，hml中写个div,div中加个text或button就可以了

将自己新建的组件在可展示的页面中调用并展示。

到这里自定义组件框架已搭建完毕，是不是还比较简单。后面就可以开始完善自己组件的功能了。

3，组件怎么调用

组件引入：

name='**pagingcomp**' src='../../common/component 
    props: ['setTotalnum','setPageount'], 

 注意：组件内部props定义的参数和data定义的参数用法一样，可以直接this.setTotalnum.

5，外部怎么传入参数

参数传入实例：

"threecomp" set-totalnum='121' set-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，外部如何绑定回调事件并获取参数

"threecomp" @your-fun="testFun"> 

注意：@your-fun="testFun"就是将外部方法testFun和组件内的yourFun进行关联，千万注意写法@your-fun，@ + 内部方法驼峰拆开全小写用‘-’连接

四、代码展示

pagingcomp.js

import document from '@ohos.document'; 
export default { 
     
    props: ['setTotalnum','setPageount'], 
    data: { 
        value: "组件创建", 
        //记录条数 外部可设置 
        totalnum:101, 
        //总页数，内部值 
        totalpage:0, 
        //开始页码 内部值 
        startpage:1, 
        //当前页码 内部值 
        curpage:1, 
        //每页显示记录的条数 外部可设置 
        pagecount:5, 
        //当前页显示的记录开始ID  传出参数 
        startnum:0, 
        //当前页显示的记录结束ID 传出参数 
        endnum:0, 
        //显示的页码按钮数 
        itemnum:5, 
        //对应页码按钮的状态值 显隐、显示值、样式 
        itemlist:[{ 
            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", 
        }], 
 
    }, 
 
     
    onInit() { 
        console.log("组件创建") 
        this.setAttr(); 
    }, 
 
     
    onAttached() { 
        this.value = "组件挂载" 
        console.log("组件挂载") 
    }, 
 
     
    onDetached() { 
        this.value = "2222" 
        console.log("2222") 
    }, 
 
     
    onPageShow() { 
        this.checkCurPage(); 
        this.checkShow(); 
        this.calcItemNum(); 
 
        // 发布回调事件 事件ID “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 (var index = 0; index < 5; index++) { 
            var isShow = 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(){ 
        var nstart = (this.curpage - 1) * this.pagecount; 
        nstart = (nstart < 0) ? 0 : nstart; 
        var nend = this.curpage * this.pagecount; 
        nend = nend > this.totalnum ? this.totalnum : nend; 
        this.startnum = nstart + 1; 
        this.endnum = nend; 
        this.value = "显示ID范围：" + 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"> 
    "test"> 
        "one" onClick="homePage">首页 
        "two" onClick="pageUp" value="pageUp">上一页 
        for="{{itemlist}}" > 
            "changeYeMa($item.value)" name="page" class="{{ $item.bgstyle}}" if="{{$item.lshow}}">{{$item.value}}