鸿蒙项目云捐助第三十一讲云捐助项目云前台显示商品列表

前面完成了云数据库后台的商品批量添加，这里需要把数据放在分类导航页面中显示。

一、云前台显示商品列表

这里需要把商品列表显示在MyNavSliderBar的组件中,MyNavSliderBar组件是通过首页路由实现的,在项目进入首页后,点击底部导航时就进入了MyNavSliderBar的显示,首先在首页中引入商品列表的云数据类型文件js和json文件。代码如下图所示。

由于商品数据是远程华为云数据库获取过来的，这里首先初始化一个捐赠商品的列表。

点击首页中底部导航的按钮，实际就是改变Tabs选项卡的操作，这里Tabs选项卡组件可以通过onChange方法进行改变，在改变时，onChange方法根据传入的参数index来决定底部导航子项的索引，第一个底部导航的索引为0,第二个底部导航的索引为1,当底部导航的索引值为1，就可以通过cloud.database连接远程数据库。代码如下图所示。

代码中在onChange方法体中判断底部导航的索引值，当索引值为1时，通过cloud.database加载云数据库，这时加载数据库的zoneName为“three”，加载的数据类型objectTypeInfo的值是GoodsInfo，也就是捐赠商品信息表。定义好云数据库后，通过database.collection()方法获取colletion()连接,再调用collection()的query()查询方法,最后通过get()方法获取所有的数据。

当华为云数据库中的内容全部查询出来后得到的结果就是result,也就是获取的华为云数据库的捐赠商品列表,把result的结果赋给最初实例化的this.donation_lists变量，就得到到捐赠商品列表的数据。

在首页中点击Tabs的底部导航栏获取到捐赠商品列表this.donation_lists数据后，就通过在调用子组件时把捐赠商品的列表值传入其中。如下图所示。

这里将获取的this.donation_lists的数据传入到子组件MyNewSliderBar组件中，在MyNewSliderBar组件内部有两个部分，左边是导航分类的显示，右边是导航分类中捐赠商品列表的显示。在之前的章节中，首页的IndexCommponent首页组件中加载数据时本身就加载过分类数据。如下图所示。

这里把获取的分类数据传给MyNewSliderBar组件中就可以实现MyNewSliderBar左侧的导航数据。导入数据如下图所示。

当MyNewSliderBar的分页组件中导入分类数据和所有捐赠商品列表后,在MyNewSliderBar组件组件中需要通过@Prop的单向传递进行数据的接收,代码如下图所示。

在MyNewSliderBar组件中完成数据接收后,把this.sub_category的分类数据传给左侧的子组件,如下图所示。

代码中遍历左侧的this.sub_category分类数据,遍历后的子项myitem传入到左侧的子组件OtherSideBar中,子组件OtherSideBar的接收类型改变成左侧导航的类,如下图所示。

左边的List列表组件处理完成后,继续处理右侧的列表组件,由于华为云数据库中把捐赠列表分类id和捐赠商品id放在了一起,也就是category_id和course_id合并在一起,形成cate_couse_id,因此在进行循环处理右侧List列表中的组件时,原来使用的是双重循环,如下图所示。

在进行后续代码开发时,需要把定义的鸿蒙类Goods类进行修改,这里添加love_number的爱心数据,代码如下图所示。

还要注意,这个Goods类中的pic属性也需要改成string类型。这里修改Goods类中的pic属性如下图所示。

由于从华为云数据库中获取的代码是一层结构，而在之前离线布局分页数据中是二层嵌套结构，这里把一层结构的数据改造成二层嵌套结构的数据。首先定义一个初始化的改造的代码列表如下图所示。

接下来在加载数据库成功后对一层结构的数据进行改造，改造时首先遍历分类数据，先实例化一个GoodsCategory的捐赠商品分类的鸿蒙类。如下图所示。

实例化一个鸿蒙捐赠商品为后，在数据库中获取分类的cate_course_id数据，这里把cate_course_id数据使用“_”切分，切分后的数组第一个值就是category_id，也就是分类的id,当获取的分类id与当前循环的分类id相等时，由进行实例化Goods的捐赠商品类，这时把从数据库中获取的相关参数赋值到Goods的捐赠商品实例中。最后需要把实例化赋值的捐赠商品实例类加入到捐赠分类实例的courseList捐赠商品列表中。在处理分类过程中，每循环一次，就把当前商品的分类category_index实现加1的操作，最后把这个造出的每一个分类数据加入到之前定义的改变层次结构的donation_arrs的数组中。

在首页中完成二层嵌套数据构建后，再把构建好的数据传输到MyNewSliderBar中。如下图所示。

MyNewSliderBar对于从Index首页中传入的数据通过@Prop单向传递进行接收。代码如下图所示。

这里接收的this.sub_donations右侧列表数据将其展示到右侧的ForEach循环变量中，如下图所示。

调用this.sub_donatioins右侧列表数据后，在ForEach循环体的组件RightSliderBar中进行调用，这里需要修改RightSliderBar布局中元素名称。

在RightSliderBar中首先把原来的引用的资源类型改变成引用字符串类型，修改代码如下图所示。

这样在模拟器中，右边导航就可以正确显示了，如下图所示。

这样就实现了鸿蒙云捐助项目的加载云数据库捐赠商品的列表显示。后续还会带来鸿蒙项目云捐助在华为云上的精彩，欢迎关注。