【HarmonyOS 5.0】从0到1开发购物应用App(五)：开发分类静态页

预览

主要组件

Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
Divider：提供分隔器组件，分隔不同内容块/内容元素。
GridRow：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题，保证不同设备上各个模块的布局一致性。栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。
GridCol：栅格子组件，必须作为栅格容器组件(GridRow)的子组件使用。

interface

/*商品分类对象类型*/
export interface GoodsClassTypes {
  id: number,
  pid: number,
  level: number,
  name: string,
  image: string,
  sons?: GoodsClassTypes[]
}

完整代码

import { GoodsClassTypes } from "../../types/index"

@Entry
@Component
export default struct Class {
  @State current: number = 0
  scroller: Scroller = new Scroller;
  @State tabsList: GoodsClassTypes[] = [
    {
      id: 1,
      pid: 0,
      level: 1,
      name: '男子系列',
      image: 'https://php-b2c.likeshop.cn/uploads/images/20210811152259ef0f21733.png',
      sons: [
        {
          id: 114,
          pid: 1,
          level: 2,
          name: "鞋类",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
          sons: [
            {
              id: 116,
              pid: 114,
              level: 3,
              name: "休闲鞋",
              image: "https://php-b2c.likeshop.cn/uploads/images/20210811152141800d21655.png",
            },
            {
              id: 117,
              pid: 114,
              level: 3,
              name: "运动鞋",
              image: "https://php-b2c.likeshop.cn/uploads/images/202108111522107b86c3204.png",
            }
          ]
        },
        {
          id: 115,
          pid: 1,
          level: 2,
          name: "服装",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
        }
      ]
    },
    {
      id: 2,
      pid: 0,
      level: 1,
      name: '家居家具',
      image: 'https://php-b2c.likeshop.cn/uploads/images/20210811152259ef0f21733.png',
      sons: [
        {
          id: 114,
          pid: 113,
          level: 2,
          name: "沙发",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
        }
      ]
    },
    {
      id: 3,
      pid: 0,
      level: 1,
      name: '时尚女装',
      image: 'https://php-b2c.likeshop.cn/uploads/images/20210811152259ef0f21733.png',
      sons: [
        {
          id: 114,
          pid: 113,
          level: 2,
          name: "短裤",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
        }
      ]
    },
    {
      id: 4,
      pid: 0,
      level: 1,
      name: '益智玩具',
      image: 'https://php-b2c.likeshop.cn/uploads/images/20210811152259ef0f21733.png',
      sons: [
        {
          id: 114,
          pid: 113,
          level: 2,
          name: "汽车玩具",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
        }
      ]
    },
    {
      id: 5,
      pid: 0,
      level: 1,
      name: '日用百货',
      image: 'https://php-b2c.likeshop.cn/uploads/images/20210811152259ef0f21733.png',
      sons: [
        {
          id: 114,
          pid: 113,
          level: 2,
          name: "牙刷",
          image: "https://php-b2c.likeshop.cn/uploads/images/20210811152157b7d4d8248.png",
        }
      ]
    },

  ]

  build() {
    Column() {
      /*顶部搜索框*/
      Row() {
        Image($r('app.media.ic_public_search')).width(20).height(20)
        Text('请输入关键字').fontColor($r('app.color.color_info')).fontSize(14)
      }
      .width('90%')
      .height(30)
      .backgroundColor('rgb(244, 244, 244)')
      .borderRadius(30)
      .padding({ left: 10 })
      .margin({ left: 15 })

      /*分割线*/
      Divider().strokeWidth(1).color('#F1F3F5').margin({ top: 10 })
      /*分类 商品列表*/
      Row() {
        Scroll(this.scroller) {
          /*一级分类*/
          Column() {
            ForEach(this.tabsList, (item: GoodsClassTypes, index: number) => {
              Row() {
                if (this.current == index) {
                  Divider().vertical(true).strokeWidth(2).color($r('app.color.color_primary'))
                } else {
                  Divider().vertical(true).strokeWidth(2).color('#fff')
                }
                Text(item.name)
                  .fontWeight(this.current == index ? 700 : 400)
                  .fontSize(14)
                  .fontColor(this.current == index ? $r('app.color.color_primary') : '')
                  .margin({ left: 10 })
              }
              .width('100%')
              .height(14)
              .alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Center)
              .margin({ top: 30 })
              .onClick(() => {
                this.current = index
              })
            }, (item: GoodsClassTypes) => item.name)
          }.height('100%')
        }.backgroundColor('#fff').height('90%').width(100)

        /*二级分类*/
        Scroll(this.scroller) {
          Column() {
            ForEach(this.tabsList[this.current].sons, (item: GoodsClassTypes) => {
              Column() {
                Row() {
                  Text(item.name)
                  Image($r('app.media.arrow_right')).width(20).height(20)
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                .alignItems(VerticalAlign.Center)

                /*三级分类*/
                GridRow({
                  columns: 2,
                  gutter: { x: 20, y: 10 },
                  breakpoints: { value: [] },
                }) {
                  ForEach(item.sons, (val: GoodsClassTypes) => {
                    GridCol({
                      span: {
                        xs: 1,
                        sm: 2,
                        md: 3,
                        lg: 4
                      },
                      offset: 0,
                      order: 0
                    }) {
                      Column() {
                        Image(val.image).width(86).height(86).borderRadius(2)
                        Text(val.name).fontSize(14).margin({ top: 10 })
                      }
                    }
                  }, (val: GoodsClassTypes) => val.name)
                }.width("100%").margin({ top: 10 })
              }.backgroundColor('#fff').margin({ bottom: 15 }).padding(15).borderRadius(6)
            }, (item: GoodsClassTypes) => item.name)
          }.width('70%').height('100%')
        }
        .padding(15)
        .height('90%')
        .backgroundColor('#f4f4f4')
        .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
        .scrollBar(BarState.Off) // 滚动条隐藏
        .edgeEffect(EdgeEffect.Spring)
      }.width('100%').backgroundColor('#f4f4f4')
    }
  }
}