鸿蒙开发学习 day02

***对昨天项目三（practice）的一个修改。***

前面说到找了很久也没有找到简单实现横向排列的方法，其中我还在官方文档里找到了有关overflow：scroll的这么一段描述，描述说它只支持纵向。

其实这样说不是很准确。如果直接在最外层使用确实不会成功，不过今天试着在外面套一层，在这一层里加上overflow：scroll后发现是可以做到横向排列的。

这种做法在手机、手表等设备都是支持的。

下面是今天学习的内容。

项目一（day02one）：实现一个轮播图

轮播组件是swiper，autoplay表示自动播放，indicator表示导航指示器，至于更具体的属性可以看开发文档。

这里轮播的是几张图片，所以先在.js的data中定义一个数组swiperdatas，其中每一项保存的是图片路径，包括图片名称和后缀名。

在.hml中对数组使用for循环实现输出。图片输出要选择对应路径，这里使用src=”{{$item}}”，$标出取值。

效果：

在轮播图的下方做了纵向、横向排列，算是对前一天学习内容的回顾。

这次排列的是图片，所以在.js的data中再加一个数组imagedatas，再在.hml中利用for循环实现。

.js

.hml

效果：

项目二（day02two）：实现基础的增删改查

这里我只写了增删的功能。

首先是在顶部（位置自己选）设置一块区域，这块区域中加上“添加”和“全部删除”两段文字，并给每个文字加上点击事件onclick。

在顶部区域下方就是具体的纵向滚动视图，和之前一样，利用数组通过for循环实现。不过在每一项后面又加上了一个“删除”的文字段，它将要实现的是删除当前项。

在.js的data中创建一个数组arrdatas，在onInit方法中对页面进行初始化。

全部删除比较简单。因为下面列出来的项都是从数组里来的，所以只要将数组再次赋值为空就实现了全部删除。

增加功能这里是使用生成随机数在最下方加上一项。随机数使用的是js原生的random方法，在取完随机数后还要使用parserInt（）对它进行取整 *** 作。

最后就是实现删除特定行的 *** 作。

在点击删除时，会有一个提示框d出。这个功能可以通过prompt.showDialog（）实现，不过在使用之前，要先在.js中添加import prompt from '@system.prompt';这一行作为引入。

通过buttons设置两个按钮，通过按钮点击实现具体 *** 作。

  

之后是在success（event）=>{}事件处理中实现两个按钮的功能。

console.log()是控制台输出，加上typeof表示输出数据类型，JSON.stringify(event)是将对象类型转换成字符串类型。这样，在点击确定或取消按钮时，可以在控制台看到其具体意义，也就是“index”。

我这里确定为0，取消为1。

这里删除使用的是splice，当点击的是确定，即event.index值为0时，表示删除。this.arrdatas.splice(index,1)的括号里，前面是开始删除的位置，后面1表示删除1项。而当event.index值为1时，表示不删除。这时候点击取消按钮就会d出“删除已取消”的提示框，存在时间为4000ms。

效果：

增加：

  

全部删除：

删除：

确定删除：

取消删除：

项目三（day02three）：学习鸿蒙中的几种数据类型

具体在代码截图中进行了注释。

控制台输出：

项目四（day02four）：实现分页

页面布局比较简单，可以分为上下两个部分。下面的部分加入一个“加载更多”的文字段，并添加点击事件onclick-”loadmore”。上面的部分展示内容，具体的是实现一个纵向滚动视图。

.hml

.js

首先是定义两个数组，一个是所有的数据，另一个是每次新添加的数据，这里我定义的是每次加入十条数据。同时利用const定义了一个值为10的常量PAGE_NUM。使用onInit进行初始化。

然后是将arrdatas的前十条数据截取到listdata中，这里使用JavaScript原生API方法：Slice（startnum,endnum），括号内分别是起始位置和结束位置。需要注意的是slice并不会删除原数据，而只是截取复制。由于每次都是截取10条数据，所以结束位置使用的是“this.currentpage * PAGE_NUM”，当前页数*数据条数，而currentpage值的改变在下面有提及。不过记得先在data中定义一个currentpage并赋值为1。

下面是点击事件的设置

首先是每点击一次，都要将currentpage+1。点击之后会有一个提示，这里要用到prompt，所以需要先引入。这样基本功能就已经实现了。

  

之后可以在数据全部显示后将“加载更多”改成“全部数据已加载完毕！”，同时d出提示框。其中maxsize表示最大页数，考虑到会有小数的情况，在使用parseInt取整后+1。然后就是通过比较currentpage和maxsize的大小判断数据是否全部显示。

效果：

  

今天学的东西并不是很难，但需要多花点时间去巩固，不然可能过几天就会忘记。