第三章 首页页面设计

---

前言

本次介绍首页模块设计，将首页分为了轮播、导航和列表三个组件

---

一、首页整体代码

import SwiperExample from '../view/components/SwiperExample'
import NavExample from '../view/components/NavExample'
import ListExample from '../view/components/ListExample'

@Component
export default struct Home {

  build() {
    Scroll() {
      Column(){
        //轮播图
        SwiperExample()
        //导航
        NavExample()
        //列表
        ListExample()
      }
      .width('100%')
    }
    .scrollBar(BarState.Auto)
  }
}

可以看出，将三个组件分出去写使整个代码块显得简洁易懂，其中使用了scrollBar滑动器，可以上下滑动整个首页。

二、三组件

1.轮播组件

代码如下：

@Component
export default struct SwiperExample {
  @State swiperData: Array<Resource> = [
    $r('app.media.banner_1'),
    $r('app.media.banner_2'),
    $r('app.media.banner_3')
  ]

  build() {
    Column(){
      Swiper(){
        ForEach(this.swiperData, (item: Resource) => {
          Image(item)
            .width('95%')
            .height(160)
        })
      }
      .index(0)  //初始化索引值
      .autoPlay(true)  //自动播放
      .interval(2000)  //自动播放间隔时间，默认3000
      .loop(true)  //是否开启循环
      .duration(1000)  //切换的动画时长
      .itemSpace(0)  //图片间隙
      .indicator(true)  //是否启用导航点指示器
    }
    .width('100%')
    .margin({top: 5})
  }
}

轮播组件实现首页顶部的图片轮播。

2.导航组件

代码如下：

// @ts-ignore
import {ItemType} from '../../mode/types'

@Component
export default struct NavExample {
  private navData:Array<ItemType> = [
    {
      title: '我的最爱',
      img: $r('app.media.ic_16')
    },
    {
      title: '历史记录',
      img: $r('app.media.ic_14')
    },
    {
      title: '消息',
      img: $r('app.media.ic_11')
    },

    {
      title: '购物车',
      img: $r('app.media.ic_07')
    },
    {
      title: '我的目标',
      img: $r('app.media.ic_19')
    },
    {
      title: '圈子',
      img: $r('app.media.ic_08')
    },
    {
      title: '收藏',
      img: $r('app.media.ic_17')
    },
    {
      title: '回收站',
      img: $r('app.media.ic_12')
    }
  ]

  build() {
    Column(){
      Grid(){
        ForEach(this.navData, (item: ItemType) => {
          GridItem(){
            Column(){
              Image(item.img)
                .width(25)
                .height(25)
              Text(item.title)
                .fontSize(14)
                .margin({top: 4})
            }
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .height(120)
      .rowsGap(12)  //设置行与行的间距
      .columnsGap(8)  //设置列与列的间距
      .backgroundColor(Color.White)
      .width('95%')
      .margin(10)
      .padding({
        top: 10,
        bottom: 10
      })
    }
  }
}

导航组件位于首页中部，包括App内部的八个服务导航。其中使用Gird()组件进行行列的排版。

3.列表组件

代码如下：

// @ts-ignore
import {ItemType} from '../../mode/types'

@Component
export default struct ListExample {
  private listsData: Array<ItemType> = [
    {
      title: '排行榜',
      img: $r('app.media.lg_1')
    },
    {
      title: '新品首发',
      img: $r('app.media.lg_2')
    },
    {
      title: '大牌闪购',
      img: $r('app.media.lg_3')
    },
    {
      title: '发现好物',
      img: $r('app.media.lg_4')
    },
    {
      title: '组团拼购',
      img: $r('app.media.lg_5')
    },
    {
      title: '最新降价',
      img: $r('app.media.lg_6')
    },
  ]

  build() {
    Column() {
      Text('列表')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .alignSelf(ItemAlign.Start)
        .margin(10)
      //列表
      List({space: 12}){
        ForEach(this.listsData, (item: ItemType) => {
          ListItem(){
            Image(item.img)
              .objectFit(ImageFit.Cover)
              .aspectRatio(1.3)
          }
          .margin({left: 5, right: 5})
        })
      }
      .width('95%')
      .lanes(2)  //排列个数
    }
  }
}

列表组件展示了App的一些特色服务，使用List()组件排列。

4.ItenType

在ets目录下添加mode文件夹，在mode中添加types.ets.文件，在types.ets中规定了对象及其类型，在其他文件中引用types.ets就能简单地输入一些对象。

代码如下：

interface ItemType{
  id?: number;
  title?: string | Resource;
  img?: string | Resource;
}

效果展示：