服务器之家

服务器之家 > 正文

HarmonyOS自定义组件之分页功能组件封装实例

时间:2021-11-22 23:13     来源/作者:鸿蒙社区

HarmonyOS自定义组件之分页功能组件封装实例

一、分页组件效果展示

HarmonyOS自定义组件之分页功能组件封装实例

二、分页组件设计流程

HarmonyOS自定义组件之分页功能组件封装实例

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

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,@ + 内部方法驼峰拆开全小写用‘-’连接

四、代码展示

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. }],
  48. },
  49. /* 组件初始化 */
  50. onInit() {
  51. console.log("组件创建")
  52. this.setAttr();
  53. },
  54. /* 组件挂载时主动调用 */
  55. onAttached() {
  56. this.value = "组件挂载"
  57. console.log("组件挂载")
  58. },
  59. /* 组件摘除 */
  60. onDetached() {
  61. this.value = "2222"
  62. console.log("2222")
  63. },
  64. /* 页面显示时自动调用 */
  65. onPageShow() {
  66. this.checkCurPage();
  67. this.checkShow();
  68. this.calcItemNum();
  69. // 发布回调事件 事件ID “yourFun” 使用处需写成 "your-fun"
  70. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  71. },
  72. /* 处理传入参数 */
  73. setAttr(){
  74. if(typeof(this.setTotalnum) != 'undefined'){
  75. this.totalnum = this.setTotalnum;
  76. }
  77. if(typeof(this.setPageount) != 'undefined'){
  78. this.pagecount = this.setPageount;
  79. }
  80. },
  81. /* 检查当前页码的合法性 */
  82. checkCurPage(){
  83. this.totalpage = Math.ceil(this.totalnum / this.pagecount);
  84. if (this.curpage > this.totalpage)
  85. this.curpage = this.totalpage;
  86. if(this.totalpage <= 0){
  87. this.totalpage = 0;
  88. this.curpage = 0;
  89. }
  90. },
  91. /* 检查上一页和下一页中间的按钮显示情况 */
  92. checkShow(){
  93. for (var index = 0; index < 5; index++) {
  94. var isShow = this.startpage + index <= this.totalpage ? true : false;
  95. this.itemlist[index].lshow = isShow;
  96. this.itemlist[index].value = this.startpage + index;
  97. if(this.startpage + index == this.curpage)
  98. {
  99. this.itemlist[index].bgstyle = "threeChoose";
  100. } else {
  101. this.itemlist[index].bgstyle = "three";
  102. }
  103. }
  104. },
  105. /* 计算选中页的起始序号 */
  106. calcItemNum(){
  107. var nstart = (this.curpage - 1) * this.pagecount;
  108. nstart = (nstart < 0) ? 0 : nstart;
  109. var nend = this.curpage * this.pagecount;
  110. nend = nend > this.totalnum ? this.totalnum : nend;
  111. this.startnum = nstart + 1;
  112. this.endnum = nend;
  113. this.value = "显示ID范围:" + this.startnum + "-" + this.endnum;
  114. },
  115. /* 重设上一页和下一页中间的开始页码 */
  116. setStartNum(){
  117. if(this.curpage <= this.startpage || this.curpage >= this.startpage + this.itemnum - 1)
  118. {
  119. this.startpage = this.curpage - Math.floor(this.itemnum / 2);
  120. this.startpage = this.startpage < 1 ? 1 : this.startpage;
  121. }
  122. },
  123. /* 上一页按钮事件 */
  124. pageUp(){
  125. this.curpage -= 1;
  126. if(this.curpage < 1){
  127. this.curpage = 1;
  128. }
  129. this.setStartNum();
  130. this.checkShow();
  131. this.calcItemNum();
  132. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  133. },
  134. /* 下一页按钮事件 */
  135. pageDown(){
  136. this.curpage += 1;
  137. if(this.curpage > this.totalpage){
  138. this.curpage = this.totalpage;
  139. }
  140. this.setStartNum();
  141. this.checkShow();
  142. this.calcItemNum();
  143. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  144. },
  145. /* 首页按钮事件 */
  146. homePage(){
  147. this.curpage = 1;
  148. this.setStartNum();
  149. this.checkShow();
  150. this.calcItemNum();
  151. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  152. },
  153. /* 尾页按钮事件 */
  154. lastPage(){
  155. this.curpage = this.totalpage;
  156. this.setStartNum();
  157. this.checkShow();
  158. this.calcItemNum();
  159. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  160. },
  161. /* 上一页和下一页中间的按钮事件 */
  162. changeYeMa(e){
  163. this.curpage = e;
  164. this.setStartNum();
  165. this.checkShow();
  166. this.calcItemNum();
  167. this.$emit('yourFun', {startnum: this.startnum,endnum: this.endnum});
  168. },

pagingcomp.hml

  1. "item">
  2. "test">
  3. for="{{itemlist}}" >

pagingcomp.css

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

index.hml

  1. name='pagingcomp' src='../../common/component/pagingcomp.hml'>
  2. "container">
  3. "title">
  4. {{ $t('strings.hello') }} {{ title }}
  5. "text-style">
  6. {{text}}
  7. "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. },
  9. /* 自定义回调事件 */
  10. testFun(e){
  11. this.text = "显示ID范围:" + e.detail.startnum + "-" + e.detail.endnum;
  12. console.info(this.text);
  13. }
  14. }


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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部