自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HarmonyOS自定義組件之分頁(yè)功能組件封裝實(shí)例

作者：拓維云創(chuàng)_zhuliang
開(kāi)發(fā) OpenHarmony
組件是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。個(gè)人對(duì)組件的通俗理解是：對(duì)單獨(dú)的某個(gè)通用功能點(diǎn)或UI顯示模塊的封裝。

[[435938]]

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

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

https://harmonyos.51cto.com

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

【拓維云創(chuàng)】HarmonyOS 自定義組件之分頁(yè)功能組件封裝實(shí)例-鴻蒙HarmonyOS技術(shù)社區(qū)

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

【拓維云創(chuàng)】HarmonyOS 自定義組件之分頁(yè)功能組件封裝實(shí)例-鴻蒙HarmonyOS技術(shù)社區(qū)

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

1，何謂自定義組件

組件是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝。個(gè)人對(duì)組件的通俗理解是：對(duì)單獨(dú)的某個(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)用

組件引入：

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

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

頁(yè)面元素裝載：

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

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

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

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

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

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

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

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

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

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

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

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

  1. 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ù)

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

注意：@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

  1. import document from '@ohos.document'; 
  2. export default { 
  3.     /* 組件可接收的參數(shù)setTotalnum，setPageount 
  4.     使用時(shí) setTotalnum 寫(xiě)成 set-totalnum 
  5.     setPageount 寫(xiě)成 set-pageount 
  6.     */ 
  7.     props: ['setTotalnum','setPageount'], 
  8.     data: { 
  9.         value: "組件創(chuàng)建", 
  10.         //記錄條數(shù) 外部可設(shè)置 
  11.         totalnum:101, 
  12.         //總頁(yè)數(shù)，內(nèi)部值 
  13.         totalpage:0, 
  14.         //開(kāi)始頁(yè)碼 內(nèi)部值 
  15.         startpage:1, 
  16.         //當(dāng)前頁(yè)碼 內(nèi)部值 
  17.         curpage:1, 
  18.         //每頁(yè)顯示記錄的條數(shù) 外部可設(shè)置 
  19.         pagecount:5, 
  20.         //當(dāng)前頁(yè)顯示的記錄開(kāi)始ID  傳出參數(shù) 
  21.         startnum:0, 
  22.         //當(dāng)前頁(yè)顯示的記錄結(jié)束ID 傳出參數(shù) 
  23.         endnum:0, 
  24.         //顯示的頁(yè)碼按鈕數(shù) 
  25.         itemnum:5, 
  26.         //對(duì)應(yīng)頁(yè)碼按鈕的狀態(tài)值 顯隱、顯示值、樣式 
  27.         itemlist:[{ 
  28.             lshow:true, 
  29.             value:0, 
  30.             bgstyle:"three", 
  31.         }, { 
  32.             lshow:true, 
  33.             value:0, 
  34.             bgstyle:"three", 
  35.         },{ 
  36.             lshow:true, 
  37.             value:0, 
  38.             bgstyle:"three", 
  39.         },{ 
  40.             lshow:true, 
  41.             value:0, 
  42.             bgstyle:"three", 
  43.         },{ 
  44.             lshow:true, 
  45.             value:0, 
  46.             bgstyle:"three", 
  47.         }], 
  48.  
  49.     }, 
  50.  
  51.     /* 組件初始化 */ 
  52.     onInit() { 
  53.         console.log("組件創(chuàng)建") 
  54.         this.setAttr(); 
  55.     }, 
  56.  
  57.     /* 組件掛載時(shí)主動(dòng)調(diào)用 */ 
  58.     onAttached() { 
  59.         this.value = "組件掛載" 
  60.         console.log("組件掛載") 
  61.     }, 
  62.  
  63.     /* 組件摘除 */ 
  64.     onDetached() { 
  65.         this.value = "2222" 
  66.         console.log("2222") 
  67.     }, 
  68.  
  69.     /* 頁(yè)面顯示時(shí)自動(dòng)調(diào)用 */ 
  70.     onPageShow() { 
  71.         this.checkCurPage(); 
  72.         this.checkShow(); 
  73.         this.calcItemNum(); 
  74.  
  75.         // 發(fā)布回調(diào)事件 事件ID “yourFun” 使用處需寫(xiě)成 "your-fun" 
  76.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  77.     }, 
  78.  
  79.     /* 處理傳入?yún)?shù) */ 
  80.     setAttr(){ 
  81.         if(typeof(this.setTotalnum) != 'undefined'){ 
  82.             this.totalnum = this.setTotalnum; 
  83.         } 
  84.  
  85.         if(typeof(this.setPageount) != 'undefined'){ 
  86.             this.pagecount = this.setPageount; 
  87.         } 
  88.     }, 
  89.  
  90.     /* 檢查當(dāng)前頁(yè)碼的合法性 */ 
  91.     checkCurPage(){ 
  92.         this.totalpage = Math.ceil(this.totalnum / this.pagecount); 
  93.         if (this.curpage > this.totalpage) 
  94.         this.curpage = this.totalpage; 
  95.  
  96.         if(this.totalpage <= 0){ 
  97.             this.totalpage = 0; 
  98.             this.curpage = 0; 
  99.         } 
  100.     }, 
  101.  
  102.     /* 檢查上一頁(yè)和下一頁(yè)中間的按鈕顯示情況 */ 
  103.     checkShow(){ 
  104.         for (var index = 0; index < 5; index++) { 
  105.             var isShow = this.startpage + index <= this.totalpage ? true : false; 
  106.             this.itemlist[index].lshow = isShow; 
  107.             this.itemlist[index].value = this.startpage + index; 
  108.             if(this.startpage + index == this.curpage) 
  109.             { 
  110.                 this.itemlist[index].bgstyle = "threeChoose"; 
  111.             } else { 
  112.                 this.itemlist[index].bgstyle = "three"; 
  113.             } 
  114.         } 
  115.     }, 
  116.  
  117.     /* 計(jì)算選中頁(yè)的起始序號(hào) */ 
  118.     calcItemNum(){ 
  119.         var nstart = (this.curpage - 1) * this.pagecount; 
  120.         nstart = (nstart < 0) ? 0 : nstart; 
  121.         var nend = this.curpage * this.pagecount; 
  122.         nend = nend > this.totalnum ? this.totalnum : nend; 
  123.         this.startnum = nstart + 1; 
  124.         this.endnum = nend; 
  125.         this.value = "顯示ID范圍：" + this.startnum + "-" + this.endnum; 
  126.     }, 
  127.  
  128.     /* 重設(shè)上一頁(yè)和下一頁(yè)中間的開(kāi)始頁(yè)碼 */ 
  129.     setStartNum(){ 
  130.         if(this.curpage <= this.startpage || this.curpage >= this.startpage + this.itemnum - 1) 
  131.         { 
  132.             this.startpage = this.curpage - Math.floor(this.itemnum / 2); 
  133.             this.startpage = this.startpage < 1 ? 1 : this.startpage; 
  134.         } 
  135.     }, 
  136.  
  137.     /* 上一頁(yè)按鈕事件 */ 
  138.     pageUp(){ 
  139.         this.curpage -= 1; 
  140.         if(this.curpage < 1){ 
  141.             this.curpage = 1; 
  142.         } 
  143.         this.setStartNum(); 
  144.         this.checkShow(); 
  145.         this.calcItemNum(); 
  146.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  147.     }, 
  148.     /* 下一頁(yè)按鈕事件 */ 
  149.     pageDown(){ 
  150.         this.curpage += 1; 
  151.         if(this.curpage > this.totalpage){ 
  152.             this.curpage = this.totalpage; 
  153.         } 
  154.         this.setStartNum(); 
  155.         this.checkShow(); 
  156.         this.calcItemNum(); 
  157.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  158.     }, 
  159.     /* 首頁(yè)按鈕事件 */ 
  160.     homePage(){ 
  161.         this.curpage = 1; 
  162.         this.setStartNum(); 
  163.         this.checkShow(); 
  164.         this.calcItemNum(); 
  165.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  166.     }, 
  167.     /* 尾頁(yè)按鈕事件 */ 
  168.     lastPage(){ 
  169.         this.curpage = this.totalpage; 
  170.         this.setStartNum(); 
  171.         this.checkShow(); 
  172.         this.calcItemNum(); 
  173.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  174.     }, 
  175.     /* 上一頁(yè)和下一頁(yè)中間的按鈕事件 */ 
  176.     changeYeMa(e){ 
  177.         this.curpage = e; 
  178.         this.setStartNum(); 
  179.         this.checkShow(); 
  180.         this.calcItemNum(); 
  181.         this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum}); 
  182.     }, 

pagingcomp.hml

  1. <div class="item"> 
  2.     <div class="test"> 
  3.         <button class="one" onClick="homePage">首頁(yè)</button> 
  4.         <button class="two" onClick="pageUp" value="pageUp">上一頁(yè)</button> 
  5.         <div for="{{itemlist}}" > 
  6.             <button onClick="changeYeMa($item.value)" name="page" class="{{ $item.bgstyle}}" if="{{$item.lshow}}">{{$item.value}}</button> 
  7.         </div> 
  8.         <button class="two" onClick="pageDown" value="page_down">下一頁(yè)</button> 
  9.         <button class="one" onClick="lastPage">尾頁(yè)</button> 
  10.     </div> 
  11. </div> 

pagingcomp.css

  1. .item { 
  2.     flex-direction: column; 
  3.     justify-content: center; 
  4.     align-items: center; 
  5.     width: 100%; 
  6.     height: 100%; 
  7. } 
  8.  
  9. .test{ 
  10.     flex-direction: row; 
  11.     justify-content: flex-end; 
  12.     align-items: flex-start; 
  13.     font-size: 20px; 
  14.     width: 100%; 
  15.     height: 100%; 
  16. } 
  17.  
  18. .one{ 
  19.     width:15%; 
  20.     text-color:red; 
  21.     background-color:cornflowerblue 
  22. } 
  23.  
  24. .two{ 
  25.     width:20%; 
  26.     text-color:orange; 
  27.     background-color: cornflowerblue; 
  28. } 
  29.  
  30. .three{ 
  31.     width: 30px; 
  32.     align-content: center; 
  33.     background-color: black; 
  34.     border-color:chartreuse; 
  35.     border: 0.5px; 
  36. } 
  37.  
  38. .threeChoose{ 
  39.     width: 30px; 
  40.     align-content: center; 
  41.     background-color:red; 
  42.     border-color:chartreuse; 
  43. } 

index.hml

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

 index.js

  1. export default { 
  2.     data: { 
  3.         title: "", 
  4.         text:"", 
  5.     }, 
  6.     onInit() { 
  7.         this.title = this.$t('strings.world'); 
  8.     }, 
  9.  
  10.     /* 自定義回調(diào)事件 */ 
  11.     testFun(e){ 
  12.         this.text = "顯示ID范圍：" + e.detail.startnum + "-" + e.detail.endnum; 
  13.         console.info(this.text); 
  14.  
  15.     } 
  16. } 

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

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

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2022-04-24 15:17:56

鴻蒙操作系統(tǒng)

2021-11-01 10:21:36

鴻蒙HarmonyOS應(yīng)用

2022-07-06 20:24:08

ArkUI計(jì)時(shí)組件

2022-03-21 15:19:27

鴻蒙UI組件ets自定義

2021-09-15 10:19:15

鴻蒙HarmonyOS應(yīng)用

2022-06-30 14:02:07

鴻蒙開(kāi)發(fā)消息彈窗組件

2022-07-15 16:45:35

slider滑塊組件鴻蒙

2021-12-24 15:46:23

鴻蒙HarmonyOS應(yīng)用

2022-02-16 16:09:12

鴻蒙游戲操作系統(tǒng)

2021-02-20 12:34:53

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2022-10-26 15:54:46

canvas組件鴻蒙

2022-10-25 15:12:24

自定義組件鴻蒙

2021-03-09 15:23:45

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2023-02-20 15:20:43

啟動(dòng)頁(yè)組件鴻蒙

2009-06-25 14:53:35

自定義UI組件JSF框架

2022-12-07 08:56:27

SpringMVC核心組件

2022-03-01 16:09:06

OpenHarmon鴻蒙單選組件

2023-01-03 07:40:27

自定義滑塊組件

2022-02-21 15:16:30

HarmonyOS鴻蒙操作系統(tǒng)

2022-06-20 15:43:45

switch開(kāi)關(guān)鴻蒙
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)