本次實(shí)戰(zhàn)課題是--自定義組件之分頁(yè)功能實(shí)例

@toc

一、分頁(yè)組件效果展示

::: hljs-center

:::

二、分頁(yè)組件設(shè)計(jì)流程

::: hljs-center

:::

三、自定義組件封裝必備知識(shí)點(diǎn)

1，何謂自定義組件

組件是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。個(gè)人對(duì)組件的通俗理解是：對(duì)多帶帶的某個(gè)通用功能點(diǎn)或UI顯示模塊的封裝。

2，組件框架搭建步驟

此處以js為例：
第一步：在工程目錄的common下新建一個(gè)包名；
第二步：在新建的包名目錄下新建新的空文件（js/hml/css），每個(gè)文件具體做啥就不一一介紹了，三個(gè)文件的名字一定要一樣，這個(gè)名字就是外部調(diào)用的名字了，非常重要。
第三步：js文件寫(xiě)好簡(jiǎn)單結(jié)構(gòu)，頁(yè)面數(shù)據(jù)，hml中寫(xiě)個(gè)div,div中加個(gè)text或button就可以了
第四步：將自己新建的組件在可展示的頁(yè)面中調(diào)用并展示。
到這里自定義組件框架已搭建完畢，是不是還比較簡(jiǎn)單。后面就可以開(kāi)始完善自己組件的功能了。

3，組件怎么調(diào)用

組件引入：

注意：必須在需要引用的頁(yè)面最上面調(diào)用，路徑和name一定要寫(xiě)對(duì)，這里的name就是組件的文件的名字。
頁(yè)面元素裝載：

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

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

4，組件怎么定義入?yún)?/h2>

組件的入?yún)⑿栌胮rops定義：

/* 組件可接收的參數(shù)setTotalnum，setPageount    使用時(shí) setTotalnum 寫(xiě)成 set-totalnum    setPageount 寫(xiě)成 set-pageount    */    props: [setTotalnum,setPageount],

注意：組件內(nèi)部props定義的參數(shù)和data定義的參數(shù)用法一樣，可以直接this.setTotalnum.

5，外部怎么傳入?yún)?shù)

參數(shù)傳入實(shí)例：

注意：set-totalnum，set-pageount為入?yún)ⅲ瑢?xiě)法一定要將駝峰法的變量拆開(kāi)并全小寫(xiě)

6，組件怎么提供回調(diào)事件并綁定參數(shù)

分發(fā)回調(diào)事件（js代碼）：

this.$emit(yourFun, {startnum: this.startnum,endnum: this.endnum});

注意：yourFun是組件提供的回調(diào)方法名，{startnum: this.startnum,endnum: this.endnum}是參數(shù)，this.$emit()調(diào)用一次,就會(huì)立馬相應(yīng)一次關(guān)聯(lián)的回調(diào)方法

7，外部如何綁定回調(diào)事件并獲取參數(shù)

注意：@your-fun="testFun"就是將外部方法testFun和組件內(nèi)的yourFun進(jìn)行關(guān)聯(lián)，千萬(wàn)注意寫(xiě)法@your-fun，@ + 內(nèi)部方法駝峰拆開(kāi)全小寫(xiě)用‘-’連接

四、代碼展示

pagingcomp.js

import document from @ohos.document;export default {    /* 組件可接收的參數(shù)setTotalnum，setPageount    使用時(shí) setTotalnum 寫(xiě)成 set-totalnum    setPageount 寫(xiě)成 set-pageount    */    props: [setTotalnum,setPageount],    data: {        value: "組件創(chuàng)建",        //記錄條數(shù) 外部可設(shè)置        totalnum:101,        //總頁(yè)數(shù)，內(nèi)部值        totalpage:0,        //開(kāi)始頁(yè)碼 內(nèi)部值        startpage:1,        //當(dāng)前頁(yè)碼 內(nèi)部值        curpage:1,        //每頁(yè)顯示記錄的條數(shù) 外部可設(shè)置        pagecount:5,        //當(dāng)前頁(yè)顯示的記錄開(kāi)始ID  傳出參數(shù)        startnum:0,        //當(dāng)前頁(yè)顯示的記錄結(jié)束ID 傳出參數(shù)        endnum:0,        //顯示的頁(yè)碼按鈕數(shù)        itemnum:5,        //對(duì)應(yīng)頁(yè)碼按鈕的狀態(tài)值 顯隱、顯示值、樣式        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("組件創(chuàng)建")        this.setAttr();    },    /* 組件掛載時(shí)主動(dòng)調(diào)用 */    onAttached() {        this.value = "組件掛載"        console.log("組件掛載")    },    /* 組件摘除 */    onDetached() {        this.value = "2222"        console.log("2222")    },    /* 頁(yè)面顯示時(shí)自動(dòng)調(diào)用 */    onPageShow() {        this.checkCurPage();        this.checkShow();        this.calcItemNum();        // 發(fā)布回調(diào)事件 事件ID “yourFun” 使用處需寫(xiě)成 "your-fun"        this.$emit(yourFun, {startnum: this.startnum,endnum: this.endnum});    },    /* 處理傳入?yún)?shù) */    setAttr(){        if(typeof(this.setTotalnum) != undefined){            this.totalnum = this.setTotalnum;        }        if(typeof(this.setPageount) != undefined){            this.pagecount = this.setPageount;        }    },    /* 檢查當(dāng)前頁(yè)碼的合法性 */    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;        }    },    /* 檢查上一頁(yè)和下一頁(yè)中間的按鈕顯示情況 */    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";            }        }    },    /* 計(jì)算選中頁(yè)的起始序號(hào) */    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;    },    /* 重設(shè)上一頁(yè)和下一頁(yè)中間的開(kāi)始頁(yè)碼 */    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;        }    },    /* 上一頁(yè)按鈕事件 */    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});    },    /* 下一頁(yè)按鈕事件 */    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});    },    /* 首頁(yè)按鈕事件 */    homePage(){        this.curpage = 1;        this.setStartNum();        this.checkShow();        this.calcItemNum();        this.$emit(yourFun, {startnum: this.startnum,endnum: this.endnum});    },    /* 尾頁(yè)按鈕事件 */    lastPage(){        this.curpage = this.totalpage;        this.setStartNum();        this.checkShow();        this.calcItemNum();        this.$emit(yourFun, {startnum: this.startnum,endnum: this.endnum});    },    /* 上一頁(yè)和下一頁(yè)中間的按鈕事件 */    changeYeMa(e){        this.curpage = e;        this.setStartNum();        this.checkShow();        this.calcItemNum();        this.$emit(yourFun, {startnum: this.startnum,endnum: this.endnum});    },}

pagingcomp.hml

    
        首頁(yè)        上一頁(yè)        
            {{$item.value}}        
        下一頁(yè)        尾頁(yè)    

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

            {{ $t(strings.hello) }} {{ title }}        
        {{text}}    
    

index.js

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

五、感謝大家閱讀

最后感謝大家的閱讀，為了能在harmonyos的道路上與時(shí)俱進(jìn)，能和大家一同學(xué)習(xí)，++假如大家有知道的比較實(shí)用的Android插件且還未遷移到harmonyos上來(lái)的插件，請(qǐng)留言區(qū)告知插件名+插件源碼路徑地址++，本人想嘗試插件移植并與大家分享！再次感謝大家。

想了解更多關(guān)于鴻蒙的內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#bkwz

::: hljs-center

:::