不废话先上图

image.png

图片数据来自网络开源接口
这里只做练习
下面是源码

type FindModel = {
  title:string,
  imgurl:string,
  yanyuan:string,
  pingfen:string,
  pingjia:string
}

@Component
export  struct CategoryPage {
  @State findLise:Array<FindModel> = []

  aboutToAppear(){
    //网络请求
    findModel.getCategoryList((data)=>{
      this.findLise = data.data
      this.findLise = [...this.findLise,...data.data]
    })
  }

  build() {
    Column(){
      Text('grid布局').width('100%').height('50vp').fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)
      Grid(){
          ForEach(this.findLise,(item)=>{
            GridItem(){
              Column(){
                Image(item.info.imgurl).width('100%').height('180vp')
                Row(){
                  Text(item.title).textOverflow({overflow:TextOverflow.Ellipsis}).width('50%').maxLines(1)
                  Text(item.info.pingfen)
                }
                .justifyContent(FlexAlign.SpaceBetween)
                .width('100%')
                Text(item.info.pingjia)
              }
              .alignItems(HorizontalAlign.Start)
            }
          })
        }
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

看着还是挺简单的 只是单独的分类页面
这类我采用的是 MVVM 的开发模式 所以会有model的产生
其实有点类似安卓开发

如果是前端小伙伴也可以用前端的思想来写