devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS开发个人学习路径（二）_harmony定义java数组

作者：weixin_40725706 | 2024-03-29 03:31:29

赞

踩

harmony定义java数组

一、overflow实现横向滑动

在上次的静态页面项目中，提到了如何实现100个数据项横向滑动。当时是使用了list组件，主要是在查找官方开发文档时，显示overflow：scroll只支持纵向滑动。

其实依然可以使用overflow:scroll来实现，这里我们可以在block循环外加一个div并添加样式，因为我们要实现的只是这个循环内数据可以横向滑动，所以没有必要在全局的container样式中实现滑动。具体代码如下：

js代码：

  1. export default {
  2.  
  3.     data: {
  4.  
  5.         //js中的数组是用[]表示，动态数组    Java数组{}，new表示  定长
  6.  
  7.         arrs:[],
  8.  
  9.     },
  10.  
  11.     onInit(){
  12.  
  13.         for(let i = 0 ; i< 100 ; i++){
  14.  
  15.             this.arrs.push("第"+i+"项");
  16.  
  17.         }
  18.  
  19.     }
  20.  
  21. }

hml代码：

  1. <div class="container">
  2.  
  3.     <div class="topview">
  4.  
  5.         <block for="{{arrs}}">
  6.  
  7.             <div class="boxview">
  8.  
  9.                 <text>{{$item}}</text>
  10.  
  11.             </div>
  12.  
  13.         </block>
  14.  
  15.     </div>
  16.  
  17. </div>

 Css样式：

  1. .container {
  2.  
  3.     display: flex;
  4.  
  5.     flex-direction: row;/*默认是按行的*/
  6.  
  7.     height: 100%;
  8.  
  9. /*    overflow: scroll;*/
  10.  
  11. }
  12.  
  13. .boxview{
  14.  
  15.     display: flex;
  16.  
  17.     justify-content: center;
  18.  
  19.     align-items: center;
  20.  
  21.     width: 30%;
  22.  
  23.     height: 20%;
  24.  
  25.     border: 1vp solid black;
  26.  
  27.     margin: 20vp;
  28.  
  29. }
  30.  
  31. .topview{
  32.  
  33.     display: flex;
  34.  
  35.     height: 40%;
  36.  
  37.     border-bottom: 1vp solid black;
  38.  
  39.     overflow: scroll;
  40.  
  41.     justify-content: center;
  42.  
  43.     align-items: center;
  44.  
  45. }

具体实现效果：

 

注意点：样式中将全局container样式中的overflow:scroll转移到新创建的样式中。再添加一些弹性布局即可实现。

这里在学习过程中，也可以切换设备。除了在项目创建时可以选择设备，在具体项目中，我们也可以自定义展示设备。

例如：在config.json中设置：

手表展示如下：

二、轮播图及横向滑动图片展示

 在实现轮播图之前，我们可以在string.json中设置我们的页面标题，具体文件位置如图：

  1. 首先将需要展示的图片下载到本地文件夹中

 

 

在js中写好数组，数组主要存储图片地址：

  1. export default {
  2.  
  3.     data: {
  4.  
  5.     swiperdatas:["common/images/huang.jpg","common/images/jici.jpg","common/images/kuiying.jpg"],
  6.  
  7.         imagedatas:["common/images/1.png","common/images/2.png","common/images/3.png",
  8.  
  9.        "common/images/4.png","common/images/5.png","common/images/6.png","common/images/7.png",
  10.  
  11.         "common/images/8.png","common/images/9.png"]
  12.  
  13.     }
  14.  
  15. }

在hml中我们将页面结构完成，先使用swiper组件实现轮播图，autoplay属性是自动播放，indicator属性true是为了开启轮播图导航点。

  1. <div class="container">
  2.  
  3.     <div class="topview">
  4.  
  5.         <swiper class="swiperview" autoplay="true" indicator="true">
  6.  
  7.             <block for="{{swiperdatas}}">
  8.  
  9.                 <div class="box">
  10.  
  11.                     <image src="{{$item}}"></image>
  12.  
  13.                 </div>
  14.  
  15.             </block>
  16.  
  17.         </swiper>
  18.  
  19.     </div>
  20.  
  21.     <div class="twoview">
  22.  
  23.         <block for="{{imagedatas}}">
  24.  
  25.             <div class="hbox">
  26.  
  27.                 <image class="imgview" src="{{$item}}"></image>
  28.  
  29.             </div>
  30.  
  31.         </block>
  32.  
  33.     </div>
  34.  
  35. </div>

Css样式如下：

  1. .container {
  2.  
  3.     display: flex;
  4.  
  5.     flex-direction: column;
  6.  
  7.     width: 100%;
  8.  
  9.     height: 100%;
  10.  
  11.     background-color: greenyellow;
  12.  
  13. }
  14.  
  15. .topview{
  16.  
  17.     width: 100%;
  18.  
  19.     height: 30%;
  20.  
  21.     border-bottom: 2vp solid black;
  22.  
  23. }
  24.  
  25. .twoview{
  26.  
  27. /*    width: 100%;*/
  28.  
  29.     height: 22%;
  30.  
  31.     border-bottom: 2vp solid black;
  32.  
  33.     display: flex;
  34.  
  35.     overflow: scroll;
  36.  
  37. }
  38.  
  39. .swiperview{
  40.  
  41.     width: 100%;
  42.  
  43.     height: 100%;
  44.  
  45. }
  46.  
  47. .box{
  48.  
  49.     width: 100%;
  50.  
  51.     height: 100%;
  52.  
  53. /*    margin: 10vp;*/
  54.  
  55. }
  56.  
  57. .hbox{
  58.  
  59.     width: 32%;
  60.  
  61.     height: 100%;
  62.  
  63. /*    border: 1vp solid black;*/
  64.  
  65.     margin: 12vp;
  66.  
  67. /*    border-radius: 10vp;*/
  68.  
  69. }
  70.  
  71. .imgview{
  72.  
  73.     width: 100%;
  74.  
  75.     height: 100%;
  76.  
  77.     border-radius: 10vp;
  78.  
  79. }

实现效果为：

三、基于鸿蒙的滚动视图的增删改查的练习

1.数组是个有序的数据结构，下标确定值的数据结构,在data中定义数组，并且在初始页面加载数组数据，使用for循环输出。

  1. data: {
  2.  
  3.     arrdatas:[]
  4.  
  5. },
  6.  
  7. onInit(){
  8.  
  9.     for (let i = 0; i <= 20; i++) {
  10.  
  11.         this.arrdatas.push("第"+i+"项");
  12.  
  13.     }
  14.  
  15. },

2.在页面的上方设置两个按钮，绑定点击事件

  1. <div class="btnview" onclick="add"><text>增加</text></div>
  2.  
  3. <div class="btnview" onclick="delall"><text>全部删除</text></div>

3.并且在两个按钮下方使用for循环展示具体数据，并且在每一项数据后面增加单个删除功能的按钮，返回的idx是选中的数据项的下标，返回给js

  1. <block for="{{arrdatas}}">
  2.  
  3.     <div class="boxview">
  4.  
  5.         <text>{{$item}}</text>
  6.  
  7.         <button class="btnview" type="text" onclick="delitem({{$idx}})">删除</button>
  8.  
  9.     </div>
  10.  
  11. </block>

4.删除所有数据的方法，当点击全部删除按钮后，将arrdatas数组重新赋值为空来实现全部删除操作。在js导入prompt模块，是为了在用户点击删除按钮时对操作者有个安全操作的提示，例如弹出对话框提醒。

5.增加功能的实现，添加的是随机生成的0-10之间的数据项。使用Math.random*数值，来获取随机数。这里的“*数值”表示取值范围是[0,数值)，那个数值是取不到的。但这时候取到的值是带小数的，我们不需要小数就要对随机数进行取整，使用parseInt()来实现。我们可以使用typeof查看event对象的类型，两次都为number。

  1. add(){
  2.  
  3.         //添加 随机数 使用javascript随机数
  4.  
  5.         // *数值表示:范围是0-数值   [0,数值)   数值取不到
  6.  
  7.         //js查看数据类型的关键字:typeof
  8.  
  9.         let rv = parseInt(Math.random()*11);
  10.  
  11.         console.log("随机数为:"+rv);
  12.  
  13.         console.log(typeof rv);
  14.  
  15.  
  16.  
  17.         //数据模型会自动驱动视图变化(渲染)
  18.  
  19.         this.arrdatas.push("随机数项为："+rv+"项");
  20.  
  21.     },

6.单个数据项删除的实现，我们需要获取到选择项的下标，所以在onclick点击事件中，将数据下标idx传给js中的delitem方法。

<button class="btnview" type="text" onclick="delitem({{$idx}})">删除</button>

7.这里主体方法和上面的全部删除一样，都是设置点击后弹出对话框，提醒用户这是删除操作。对话框中title设置的是对话框的标题，message设置对话框的内容，buttons最少要有两个，text是按钮内容，color设置颜色。如果用户选择删除，则使用this.arradtas.splice(index,1)来删除index这一项，index参数表示要删除的数据下标，1表示要删除的个数。

  1. delitem(index){
  2.  
  3.         console.log("点击删除的项目索引是："+index);
  4.  
  5.  
  6.  
  7.         //在执行删除和更新的时候，应该对操作者有个安全操作的提示
  8.  
  9.         //操作严谨性
  10.  
  11.         //执行删除  规避责任
  12.  
  13.  
  14.  
  15.         //会弹出对话框
  16.  
  17.         prompt.showDialog({
  18.  
  19.             title:"操作提示",
  20.  
  21.             message:"你确定要删除吗?",
  22.  
  23.             buttons:[{"text":"确认","color":"#000000"},{"text":"取消","color":"#000000"}],
  24.  
  25.             success:(event)=>{
  26.  
  27.                 console.log(event);
  28.  
  29.                 console.log(typeof event);
  30.  
  31.                 console.log(JSON.stringify(event));//把object转换成字符串类型
  32.  
  33.  
  34.  
  35.                 if(event.index == 0){
  36.  
  37.                     this.arrdatas.splice(index , 1);
  38.  
  39.                 }
  40.  
  41.                 if(event.index == 1){
  42.  
  43.                     //提示框
  44.  
  45.                     prompt.showToast({
  46.  
  47.                         message:"你取消了删除操作",
  48.  
  49.                         duration:6000
  50.  
  51.                     })
  52.  
  53.                 }
  54.  
  55.             }
  56.  
  57.         });
  58.  
  59.     }
实现效果图：

 

四、js的数据类型和typeof关键字

查询数据类型可以使用typeof通过console输出，数值型数据在这里是number类型；并且单引号和双引号都属于string类型，不同于Java的字符和字符串类型；true和false还是boolean类型；未定义数据数据类型为undefine；数组为object类型；用[]表示的是数组，用{}表示的是类似于键值对的key-value的object类型，比如“name”：“zhangsan”。

  1. export default {
  2.  
  3.     data: {
  4.  
  5.         a1:10,
  6.  
  7.         a2:"10",
  8.  
  9.         a3:'10',
  10.  
  11.         a4:true,
  12.  
  13.         a6:[], //数组
  14.  
  15.         a7:{} //key-value的object类型  "name":"张三"
  16.  
  17.     },
  18.  
  19.     onInit(){
  20.  
  21.         console.log("a1的值为："+this.a1);
  22.  
  23.         console.log("a1的数据类型为："+ typeof this.a1);//number
  24.  
  25.  
  26.  
  27.         console.log("a2的值为："+this.a2);
  28.  
  29.         console.log("a2的数据类型为："+ typeof this.a2); //string
  30.  
  31.  
  32.  
  33.         console.log("a3的值为："+this.a3);
  34.  
  35.         console.log("a3的数据类型为："+ typeof this.a3); //string
  36.  
  37.  
  38.  
  39.         console.log("a4的值为："+this.a4);
  40.  
  41.         console.log("a4的数据类型为："+ typeof this.a4); //boolean
  42.  
  43.  
  44.  
  45.         let a5;
  46.  
  47.         console.log("a5的值为："+a5);
  48.  
  49.         console.log("a5的数据类型为："+ typeof a5); //undefined
  50.  
  51.  
  52.  
  53.         console.log("a6的值为："+this.a6);
  54.  
  55.         console.log("a6的数据类型为："+ typeof this.a6); //object
  56.  
  57.  
  58.  
  59.         console.log("a7的值为："+this.a7);
  60.  
  61.         console.log("a7的数据类型为："+ typeof this.a7); //object
  62.  
  63.     }
  64.  
  65. }

五、实现对多项数据的分页

1.将整个页面划分为数据显示区和下方的显示更多按钮。

  1. <div class="container">
  2.  
  3.     <div class="contentview">
  4.  
  5.         <block for="{{listdata}}">
  6.  
  7.             <div class="lineview">
  8.  
  9.                 <text>{{$item}}</text>
  10.  
  11.             </div>
  12.  
  13.         </block>
  14.  
  15.     </div>
  16.  
  17.     <div class="operatorview" onclick="loadmore" disabled="{{flag}}">
  18.  
  19.         <text>{{loadtext}}</text>
  20.  
  21.     </div>
  22.  
  23. </div>

2.先设置每一页的数据条数，在js全局变量中设置PAGE_NUM=10，表示每页显示10条数据。再在data数据中创建两个数组，一个用来存放全部数据项，一个用来存放每一页的数据条数。设置初始页码为1。

  1. data: {
  2.  
  3.     arrdatas:[],
  4.  
  5.     listdata:[], //每次存放10条数据
  6.  
  7.     currentpage:1,
  8.  
  9.     loadtext:"加载更多",
  10.  
  11.     flag:false
  12.  
  13. },

3.在数据初始化onInit中，先把所有数据用循环输出，然后使用使用JavaScript原生API方法：slice(startnum,endnum)将总数据的数组（arrdatas）截取到目标数组中去（listdatas）并展示。Slice的用法是：前一个参数表示截取的开始位置，后一个参数用初始页码1*每页条数10得到前10项。这就是初始界面，展示了全部数据的前10条。

  1. onInit(){
  2.  
  3.         //初始化数据  100条数据
  4.  
  5.         //为什么分页？  1. 100条数据一次性加载，会影响页面渲染的性能
  6.  
  7.         //           2. 用户可能只需要前20条   站在用户的角度
  8.  
  9.         for (let i = 0; i < 50; i++) {
  10.  
  11.             this.arrdatas.push("第"+i+"项");
  12.  
  13.         }
  14.  
  15.         //使用JavaScript原生API方法：slice(startnum,endnum)
  16.  
  17.         //slice截取，并没有删除
  18.  
  19.         this.listdata = this.arrdatas.slice(0,this.currentpage*PAGE_NUM);
  20.  
  21.         console.log(this.listdata);
  22.  
  23.         console.log(this.arrdatas);
  24.  
  25.     },

4.接下来处理loadmore点击事件，每一次点击加载数据时，都将页码currentpage自增1，用以接下来的数据展示。

this.currentpage++;

5.点击加载数据时，设置了一个提示框告诉用户展示到了第几页。

  1. prompt.showToast({
  2.  
  3.    message:"加载的是第"+this.currentpage+"页",
  4.  
  5. });

6.接下来要实现的就是点击一次，显示下一页。先获取到总的页数，用总的数据条数/每页的条数=页数。但是会出现一个问题，可能总的数据条数/每页条数得到的是个小数，可页码只能是整数。这时可以将原来式子的“/”改为“%”，并使用三元运算符判断是否要取整，使用三元运算符的目的为了提高程序的健壮性。

  1. let maxSize = this.arrdatas.length%PAGE_NUM == 0 ?
  2.  
  3.     this.arrdatas.length/PAGE_NUM : parseInt(this.arrdatas.length/PAGE_NUM)+1;
  4.  
  5. console.log("总共的页数:"+maxSize);

这里取整还是使用的parseInt()，多出来的数据可以将页码+1来展示。

7.最后判断当前的页码是不是到了最后一页，为了防止提示的页码超出最大页码，当this.currentpage > maxSize时，弹出提示信息“数据已加载完毕”，并且将按钮显示的内容改为“数据已加载完毕”，同时将flag标记改为true，这个标记的作用是让用户点击到最后一页时，不能够再点击数据加载。

  1. if (this.currentpage > maxSize) {
  2.  
  3.     prompt.showToast({
  4.  
  5.         message:"数据已加载完毕"
  6.  
  7.     });
  8.  
  9.     this.loadtext = "数据已加载完毕";
  10.  
  11.     this.flag = true;
  12.  
  13. }

这里的flag在loadmore点击事件中加了个属性，disable获取到flag的值，如果为初始化的false则点击事件正常运行，如果flag的值变为true，说明页码超过了最大页码，点击事件停止，用户不能再点击加载数据按钮。

  1. <div class="operatorview" onclick="loadmore" disabled="{{flag}}">
  2.  
  3.     <text>{{loadtext}}</text>
  4.  
  5. </div>

如果currentpage < maxSize时，就正常展示currentpage++后的数据。同样使用slice截取0到currentpage++页的全部数据。

  1. else{
  2.  
  3.     this.listdata = this.arrdatas.slice(0,this.currentpage*PAGE_NUM);
  4.  
  5. }

这里老师提出了一个需求，就是当前情况下是每点击一次加载数据，从0到当前页的数据会全部展示，现在要想实现只显示当前页的数据。其实只需要将slice的前一个参数改为当前页的第一个数据。例如：this.listdata = this.arrdatas.slice((this.currentpage-1)*PAGE_NUM,this.currentpage*PAGE_NUM);

具体实现效果如下：

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/333483
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号