HarmonyOS实现商品分类导航页面

目录

一：功能概述

二：代码实现

三：效果图

---

一：功能概述

分类导航采用左右结构布局，我们这里简单展示一级分类，以及该分类下的商品信息。左侧显示商品的一级分类，右侧显示显示该分类的商品。默认从首页进入该分类页面时，显示第一个分类的商品，切换一级分类时，传入分类参数，清空右侧商品，重新调用接口显示当前分类的商品，展示在右侧页面。

1:主要组件：

List：列表显示组件

Grid：Grid组件显示几行几列布局效果

二：代码实现

1：左侧分类和右侧商品页面展示：
    Column() {
      Row() {
        NewGoodsCategoryList({selectIndex:$selectIndex})
        if (this.newArray.length > 0) {
          GoodsCategoryView({goodsList : this.newArray})
        }