基于ark-ts的电商app的首页商品分类设计及部分商品展示

 完善首页设计

 一 tabs组件实现顶部页签的设计

  接上回我们完成了首页基础的轮播图以及搜索框的设计，接下来想到了作为电商平台app，一定要对商品进行很多的分类以及展示，基于这样的需求我又设计了一个顶部页签导航，来完成分类查找的目的。

  进入到代码实现的阶段，因为是顶部页签，我设计了一个Tabs组件，来存储不同的标签。并且因为是顶部，所以要设置一个Barposition.start来确保组件设置在顶部，每一个Tab设置一个tab content来代表不同的页签。比如代码当中的demo01，在demo01中设置export default关键字允许导出，通过import导入，适当的简化了代码，实现的“推荐”这个标签。在设置如下的几个tab后，设置标签的大小和颜色。

 build(){
    Column() {
      /*搜索框*/
    padding({ top: $r('app.float.home_grid_margin'), left: $r('app.float.home_list_padding') })

      Tabs({ barPosition: BarPosition.Start }) {
        /*推荐页*/
        TabContent() {
          Demo03()
        }.tabBar(CommonConstants.WOMAN_TITLE)
        /*Tab1*/
        TabContent() {
          Demo01()
        }.tabBar(CommonConstants.HOME_TITLE)
        /*Tab2*/
        TabContent() {
          Text('Tab2')
        }.tabBar(CommonConstants.MAN_TITLE)
        /*Tab3*/
        TabContent() {
          Text('Tab3')
        }.tabBar(CommonConstants.SPORT_TITLE)
        /*Tab4*/
        TabContent() {
          Text('Tab4')
        }.tabBar(CommonConstants.TEC_TITLE)
        /*其他*/
        TabContent() {

        }.tabBar(CommonConstants.OTHER_TITLE)
      }.barHeight('35vp')
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .onChange((index: number) => {
        console.info(index.toString())
      }).width('100%').backgroundColor(0xF1F3F5)
    }.width('100%')
    .height('100%')
  }

（import命令如上，链接demo01.demo03等文件）

二 通过list组件实现特卖商品展示

list组件可以实现不错效果的商品展示，因为在list容器组件中，可以放置一些具有相同高度和宽度达到元素，所以比较适合放置一些图文类的元素。每一个listitem中的数据是靠itemdata来存储的，来存储金额，商品描述或者品牌，通过foreach循环得到这些值。每一个listitem中又需要图片，我选择了firstitem.image组件来获取图片数据，定义高度宽度以及圆角大小。文本类介绍呢又需要row一个text组件，来输出他的金额以及品牌等，最后插入一个backgroundimage设置背景图片，下面是具体的代码实现。

build(){
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(mainViewModel.getSecondGridData(), (firstItem: ItemData) => {
          ListItem() {
            Column(){
              Image(firstItem.img)
                .height('100vp')
                .width('100vp')
                .borderRadius($r('app.float.home_swiper_borderRadius'))//图片组件
              Row(){
                Text('特价')
                  .fontSize($r('app.float.small_text_size'))
                  .fontWeight(FontWeight.Medium)
                Text(firstItem.title)
                  .margin({ left: $r('app.float.home_list_padding') })
                  .fontSize($r('app.float.little_text_size'))
                  .fontColor($r('app.color.home_grid_fontColor'))
              }
              .backgroundImage($r('app.media.title_money'))
              .borderRadius($r('app.float.home_grid_columnsGap'))
              .backgroundImageSize(ImageSize.Cover)
              Text(firstItem.others)
                .margin({ top: $r('app.float.home_list_margin') })
                .fontSize($r('app.float.little_text_size'))
                .fontWeight(FontWeight.Bolder)
            }
          }

实现效果：

首页就设置的差不多了，我又添加了一个grid组件来丰富展示内容。接下来展示首页的设计效果。

好了，以上就是首页的展示内容了，接下来我会进一步完善女装，男装等一系列页面的设计。