CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章HarmonyOS自定义组件之分页功能组件封装实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、分页组件效果展示

2、分页组件设计流程

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

1，何谓自定义组件

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

2，组件框架搭建步骤

此处以js为例:

第一步：在工程目录的common下新建一个包名,

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

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

第四步：将自己新建的组件在可展示的页面中调用并展示.

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

3，组件怎么调用

组件引入:

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

注意：必须在需要引用的页面最上面调用，路径和name一定要写对，这里的name就是组件的文件的名字.

页面元素装载:

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

注意：用法跟text、button一样，只是标签名字变成了组件名字.

4，组件怎么定义入参

组件的入参需用props定义:

1. /* 组件可接收的参数setTotalnum，setPageount
2. 使用时 setTotalnum 写成 set-totalnum
3. setPageount 写成 set-pageount
4. */
5. props: ['setTotalnum','setPageount'],

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

5，外部怎么传入参数

参数传入实例:

1. "threecomp" set -totalnum= '121' set -pageount= '10' >

注意：set-totalnum，set-pageount为入参，写法一定要将驼峰法的变量拆开并全小写 。

6，组件怎么提供回调事件并绑定参数

分发回调事件(js代码):

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

注意：yourFun是组件提供的回调方法名，{startnum: this.startnum,endnum: this.endnum}是参数，this.$emit()调用一次,就会立马相应一次关联的回调方法 。

7，外部如何绑定回调事件并获取参数

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

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

4、代码展示

pagingcomp.js 。

1. import document from '@ohos.document';
2. export default {
3. /* 组件可接收的参数setTotalnum，setPageount
4. 使用时 setTotalnum 写成 set-totalnum
5. setPageount 写成 set-pageount
6. */
7. props: ['setTotalnum','setPageount'],
8. data: {
9. value: "组件创建",
10. //记录条数 外部可设置
11. totalnum:101,
12. //总页数，内部值
13. totalpage:0,
14. //开始页码 内部值
15. startpage:1,
16. //当前页码 内部值
17. curpage:1,
18. //每页显示记录的条数 外部可设置
19. pagecount:5,
20. //当前页显示的记录开始ID 传出参数
21. startnum:0,
22. //当前页显示的记录结束ID 传出参数
23. endnum:0,
24. //显示的页码按钮数
25. itemnum:5,
26. //对应页码按钮的状态值 显隐、显示值、样式
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. }],
49. },
51. /* 组件初始化 */
52. onInit() {
53. console.log("组件创建")
54. this.setAttr();
55. },
57. /* 组件挂载时主动调用 */
58. onAttached() {
59. this.value = "组件挂载"
60. console.log("组件挂载")
61. },
63. /* 组件摘除 */
64. onDetached() {
65. this.value = "2222"
66. console.log("2222")
67. },
69. /* 页面显示时自动调用 */
70. onPageShow() {
71. this.checkCurPage();
72. this.checkShow();
73. this.calcItemNum();
75. // 发布回调事件 事件ID “yourFun” 使用处需写成 "your-fun"
76. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
77. },
79. /* 处理传入参数 */
80. setAttr(){
81. if(typeof(this.setTotalnum) != 'undefined'){
82. this.totalnum = this.setTotalnum;
83. }
85. if(typeof(this.setPageount) != 'undefined'){
86. this.pagecount = this.setPageount;
87. }
88. },
90. /* 检查当前页码的合法性 */
91. checkCurPage(){
92. this.totalpage = Math.ceil(this.totalnum / this.pagecount);
93. if (this.curpage > this.totalpage)
94. this.curpage = this.totalpage;
96. if(this.totalpage <= 0){
97. this.totalpage = 0;
98. this.curpage = 0;
99. }
100. },
102. /* 检查上一页和下一页中间的按钮显示情况 */
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. },
117. /* 计算选中页的起始序号 */
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. },
128. /* 重设上一页和下一页中间的开始页码 */
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. },
137. /* 上一页按钮事件 */
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. /* 下一页按钮事件 */
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. /* 首页按钮事件 */
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. /* 尾页按钮事件 */
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. /* 上一页和下一页中间的按钮事件 */
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. "item" >
2. "test" >
3. "one" onClick="homePage">首页
4. "two" onClick="pageUp" value="pageUp">上一页
5. for = "{{itemlist}}" >
6. "changeYeMa($item.value)" name="page" class="{{ $item.bgstyle}}" if="{{$item.lshow}}">{{$item.value}}
8. "two" onClick="pageDown" value="page_down">下一页
9. "one" onClick="lastPage">尾页

pagingcomp.css 。

1. .item {
2. flex-direction: column;
3. justify-content: center;
4. align-items: center;
5. width: 100%;
6. height: 100%;
7. }
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. }
18. .one{
19. width:15%;
20. text-color:red;
21. background-color:cornflowerblue
22. }
24. .two{
25. width:20%;
26. text-color:orange;
27. background-color: cornflowerblue;
28. }
30. .three{
31. width: 30px;
32. align-content: center;
33. background-color: black;
34. border-color:chartreuse;
35. border: 0.5px;
36. }
38. .threeChoose{
39. width: 30px;
40. align-content: center;
41. background-color:red;
42. border-color:chartreuse;
43. }

index.hml 。

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

index.js 。

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

原文链接：https://harmonyos.51cto.com 。

最后此篇关于HarmonyOS自定义组件之分页功能组件封装实例的文章就讲到这里了,如果你想了解更多关于HarmonyOS自定义组件之分页功能组件封装实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。