HarmonyOS 鸿蒙Next 农物购app开发技术分享《六》-- 商品列表

在上一节我们完善了首页新增了资讯中心的模块的相关内容，从首页可以通过标题进入到资讯列表，点击条目又可以跳转到资讯详情，这一节我们来实现在线商城的主要功能，商品列表展示功能。

首先我们看一下我们要实现的页面样式

​

可以看到商品列表是一行两个商品这样来进行展示的，一条数据是图片、商品名称、价格、销量等信息来组成。

要展示商品列表我们也要新建一个自定义组件来在index中引用

代码实现

import { router } from ‘@kit.ArkUI’

@Component

export struct ProductListPage {

  private imgList:ESObject[]=[

    {“img”:“网络图片” ,

      “title”:“tpe材质手机壳”,

      “volume”:“1027”,

      “price”:“7.9”},

    {“img”:“网络图片” ,

      “title”:“水果干组合”,

      “volume”:“323”,

      “price”:“39.9”},

    {“img”:“网络图片” ,

      “title”:“mate40”,

      “volume”:“9999”,

      “price”:“4499”},

    {“img”:“网络图片” ,

      “title”:“佳能相机”,

      “volume”:“890”,

      “price”:“8999”},

  ]

  build() {

    Column() {

      GridRow({ columns: 2 }){

        ForEach(this.imgList, (item: ESObject, index?:number) => {

          GridCol() {

            Column(){

              Image(item.img).width(‘100%’).height(120)

                .borderRadius(10)

              Text(item.title)

                .fontSize(18)

                .fontWeight(FontWeight.Bold)

                .margin({top:10})

              Row(){

                Text(item.price+“¥”)

                  .margin({top:5})

                  .fontSize(18)

                  .fontColor(Color.Red)

                Blank()

                Text(item.volume)

                  .margin({top:5})

                  .fontSize(14)

              }

              .width(‘100%’)

            }

            .padding(10)

            .alignItems(HorizontalAlign.Start)

            .onClick(()=>{

              router.pushUrl({url:""})

            })

          }.backgroundColor(item)

        })

      }

    }

    .height(‘100%’)

    .width(‘100%’)

  }

}

然后我们回到index 中

TabContent() {

  Column(){

    BannerPage()

    TopListPage()

    NewPage()

    ProductListPage()

  }

  .height(‘100%’)

}

.tabBar(this.tabBuilder(“首页”,0,$r(‘app.media.index1_check’),$r(‘app.media.index1_not_check’)))

把我们的列表页组件引入

执行代码后首页展示如下

​

​

可以看到我们的首页内容更加丰富了，这一节就到这里了