本次實戰課題是--自定義組件之分頁功能實例
@toc
一、分頁組件效果展示
::: hljs-center
:::
二、分頁組件設計流程
::: hljs-center
:::
三、自定義組件封裝必備知識點
1，何謂自定義組件
組件是對數據和方法的簡單封裝。個人對組件的通俗理解是：對多帶帶的某個通用功能點或UI顯示模塊的封裝。
2，組件框架搭建步驟
此處以js為例：
第一步：在工程目錄的common下新建一個包名；
第二步：在新建的包名目錄下新建新的空文件（js/hml/css），每個文件具體做啥就不一一介紹了，三個文件的名字一定要一樣，這個名字就是外部調用的名字了，非常重要。
第三步：js文件寫好簡單結構，頁面數據，hml中寫個div,div中加個text或button就可以了
第四步：將自己新建的組件在可展示的頁面中調用并展示。
到這里自定義組件框架已搭建完畢，是不是還比較簡單。后面就可以開始完善自己組件的功能了。
3，組件怎么調用
組件引入：
注意：必須在需要引用的頁面最上面調用，路徑和name一定要寫對，這里的name就是組件的文件的名字。
頁面元素裝載：
<**pagingcomp** class="threecomp">注意：用法跟text、button一樣，只是標簽名字變成了組件名字。
4，組件怎么定義入參
組件的入參需用props定義：
/* 組件可接收的參數setTotalnum，setPageount 使用時 setTotalnum 寫成 set-totalnum setPageount 寫成 set-pageount */ props: [setTotalnum,setPageount],注意：組件內部props定義的參數和data定義的參數用法一樣，可以直接this.setTotalnum.
5，外部怎么傳入參數
參數傳入實例：
注意：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="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
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); }, /* 自定義回調事件 */ testFun(e){ this.text = "顯示ID范圍：" + e.detail.startnum + "-" + e.detail.endnum; console.info(this.text); }}五、感謝大家閱讀
最后感謝大家的閱讀，為了能在harmonyos的道路上與時俱進，能和大家一同學習，++假如大家有知道的比較實用的Android插件且還未遷移到harmonyos上來的插件，請留言區告知插件名+插件源碼路徑地址++，本人想嘗試插件移植并與大家分享！再次感謝大家。
https://harmonyos.51cto.com/#bkwz
::: hljs-center
:::
