HarmonyOS自定義組件之分頁功能組件封裝實例

作者：拓維云創_zhuliang 2021-11-22 10:00:33

開發 OpenHarmony

組件是對數據和方法的簡單封裝。個人對組件的通俗理解是：對單獨的某個通用功能點或UI顯示模塊的封裝。

[[435938]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

一、分頁組件效果展示

【拓維云創】HarmonyOS 自定義組件之分頁功能組件封裝實例-鴻蒙HarmonyOS技術社區

二、分頁組件設計流程

三、自定義組件封裝必備知識點

1，何謂自定義組件

組件是對數據和方法的簡單封裝。個人對組件的通俗理解是：對單獨的某個通用功能點或UI顯示模塊的封裝。

2，組件框架搭建步驟

此處以js為例：

第一步：在工程目錄的common下新建一個包名;

第二步：在新建的包名目錄下新建新的空文件(js\hml\css)，每個文件具體做啥就不一一介紹了，三個文件的名字一定要一樣，這個名字就是外部調用的名字了，非常重要。

第三步：js文件寫好簡單結構，頁面數據，hml中寫個div,div中加個text或button就可以了

第四步：將自己新建的組件在可展示的頁面中調用并展示。

到這里自定義組件框架已搭建完畢，是不是還比較簡單。后面就可以開始完善自己組件的功能了。

3，組件怎么調用

組件引入：

<element name='**pagingcomp**' src='../../common/component/**pagingcomp.hml**'></element> 
1. 
1. 
1.

注意：必須在需要引用的頁面最上面調用，路徑和name一定要寫對，這里的name就是組件的文件的名字。

頁面元素裝載：

<**pagingcomp** class="threecomp"></**pagingcomp**>

注意：用法跟text、button一樣，只是標簽名字變成了組件名字。

4，組件怎么定義入參

組件的入參需用props定義：

/* 組件可接收的參數setTotalnum，setPageount 
    使用時 setTotalnum 寫成 set-totalnum 
    setPageount 寫成 set-pageount 
    */ 
    props: ['setTotalnum','setPageount'],

注意：組件內部props定義的參數和data定義的參數用法一樣，可以直接this.setTotalnum.

5，外部怎么傳入參數

參數傳入實例：

<pagingcomp class="threecomp" set-totalnum='121' set-pageount='10'></pagingcomp>

注意：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，外部如何綁定回調事件并獲取參數

<pagingcomp class="threecomp" @your-fun="testFun"></pagingcomp>

注意：@your-fun="testFun"就是將外部方法testFun和組件內的yourFun進行關聯，千萬注意寫法@your-fun，@ + 內部方法駝峰拆開全小寫用‘-’連接

四、代碼展示

pagingcomp.js

import document from '@ohos.document'; 
export default { 
    /* 組件可接收的參數setTotalnum，setPageount 
    使用時 setTotalnum 寫成 set-totalnum 
    setPageount 寫成 set-pageount 
    */ 
    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

<div class="item"> 
    <div class="test"> 
        <button class="one" onClick="homePage">首頁</button> 
        <button class="two" onClick="pageUp" value="pageUp">上一頁</button> 
        <div for="{{itemlist}}" > 
            <button onClick="changeYeMa($item.value)" name="page" class="{{ $item.bgstyle}}" if="{{$item.lshow}}">{{$item.value}}</button> 
        </div> 
        <button class="two" onClick="pageDown" value="page_down">下一頁</button> 
        <button class="one" onClick="lastPage">尾頁</button> 
    </div> 
</div>

pagingcomp.css

.item { 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
} 
 
.test{ 
    flex-direction: row; 
    justify-content: flex-end; 
    align-items: flex-start; 
    font-size: 20px; 
    width: 100%; 
    height: 100%; 
} 
 
.one{ 
    width:15%; 
    text-color:red; 
    background-color:cornflowerblue 
} 
 
.two{ 
    width:20%; 
    text-color:orange; 
    background-color: cornflowerblue; 
} 
 
.three{ 
    width: 30px; 
    align-content: center; 
    background-color: black; 
    border-color:chartreuse; 
    border: 0.5px; 
} 
 
.threeChoose{ 
    width: 30px; 
    align-content: center; 
    background-color:red; 
    border-color:chartreuse; 
}

index.hml

<element name='pagingcomp' src='../../common/component/pagingcomp.hml'></element> 
<div class="container"> 
    <text class="title"> 
        {{ $t('strings.hello') }} {{ title }} 
    </text> 
    <div class="text-style"> 
        <text >{{text}}</text> 
    </div> 
    <pagingcomp class="threecomp" @your-fun="testFun" set-totalnum='121' set-pageount='10'></pagingcomp> 
</div>

index.js

export default { 
    data: { 
        title: "", 
        text:"", 
    }, 
    onInit() { 
        this.title = this.$t('strings.world'); 
    }, 
 
    /* 自定義回調事件 */ 
    testFun(e){ 
        this.text = "顯示ID范圍：" + e.detail.startnum + "-" + e.detail.endnum; 
        console.info(this.text); 
 
    } 
}