预览

主要组件

Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
Column：沿垂直方向布局的容器。
Row：沿水平方向布局容器。
Swiper：滑块视图容器，提供子组件滑动轮播显示的能力。
Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
GridItem：网格容器中单项内容容器。
Image：Image为图片组件，常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源，支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。
Divider：提供分隔器组件，分隔不同内容块/内容元素。
Marquee：跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。

自定义组件

商品列表（瀑布流）

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

@Entry
@Component
export default struct GoodsList {
  @State list: GoodsItemTypes[] = [{
    id: 1111,
    name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
    imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
    price: 99,
    market_price: 199
  },
    {
      id: 222,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/202106011057029f7988147.jpg',
      price: 99,
      market_price: 199
    },
    {
      id: 333,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
      price: 99,
      market_price: 199
    },
    {
      id: 444,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
      price: 99,
      market_price: 199
    },
    {
      id: 555,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
      price: 99,
      market_price: 199
    },
    {
      id: 666,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
      price: 99,
      market_price: 199
    },
    {
      id: 777,
      name: 'ins迷你化妆刷套装眼影刷美妆工具粉底刷套装送刷包学生初学者',
      imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210309150007117667019.jpeg',
      price: 99,
      market_price: 199
    },
  ];

  build() {
    WaterFlow() {
      ForEach(this.list, (item: GoodsItemTypes) => {
        FlowItem() {
          Column() {
            Image(item.imgUrl)
              .objectFit(ImageFit.Fill)
              .width('100%')
            Column() {
              Text(item.name).margin({ top: 10 }).textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(2).fontSize(12)
              Row() {
                Text('￥' + item.price).fontColor($r('app.color.color_error')).fontSize(18)
                Text('￥' + item.market_price).fontColor($r('app.color.color_info')).fontSize(12).decoration({type: TextDecorationType.LineThrough})
              }.justifyContent(FlexAlign.SpaceBetween).margin({top: 10}).width('100%')
            }.padding(10)
          }.backgroundColor('#fff').borderRadius(6)
        }.width('100%')
        .onAppear(() => {
          // 即将触底时提前增加数据
        })
      }, (item: string,index: number) => item)
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(10)
    .width('90%')
    .height('100%')
  }
}

完整代码

import { router } from '@kit.ArkUI';
import GoodsList from '../../components/GoodsList';
import { TabsList } from "../../types/index"

@Entry
@Component
export default struct Home {
  scroller: Scroller = new Scroller;
  private swiperController: SwiperController = new SwiperController()
  @State swiperList: string[] = [
    'https://img1.baidu.com/it/u=3953008485,1470810916&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=efa4eb75858aa35be29a825dbc782556',
    'https://img2.baidu.com/it/u=89428783,598609419&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703869200&t=9384207a9803da3c177fe07614cf3d8c',
    'https://img2.baidu.com/it/u=1842450460,1583105677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=208',
  ]
  @State tabsList: TabsList[] = [
    { name: '砍价活动', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322367e6a5479.png' },
    { name: '拼团活动', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223798a31616.png' },
    { name: '限时秒杀', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432233bf9e9321.png' },
    { name: '热销榜单', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223839e33279.png' },
    { name: '领券中心', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223f68476108.png' },
    { name: '积分签到', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432238059f4396.png' },
    { name: '积分抽奖', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322330e7b4149.png' },
    { name: '商城资讯', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143622847ab7155.png' },
    { name: '开源', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624144414783817921.png' },
    { name: '帮助中心', url: '', icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241435258effe0820.png' },
  ]

  onPageShow() {
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        /*顶部搜索框*/
        Row() {
          Image($r('app.media.ic_public_search')).width(20).height(20)
          Text('请输入关键字').fontColor($r('app.color.color_info')).fontSize(14)
        }
        .backgroundColor('#ffffff')
        .borderRadius(30)
        .width('90%')
        .height(30)
        .padding({ left: 10 })
        .margin({ top: 10 })
        .onClick(() => {
          router.pushUrl({
            url: ``
          })
        })

        /*banner轮播图*/
        Swiper(this.swiperController) {
          ForEach(this.swiperList, (item: string) => {
            Image(item).width('100%').height('100%')
          }, (item: string) => item)
        }
        .margin({ top: 10, })
        .width('90%')
        .height(150)
        .borderRadius(10)
        .autoPlay(true)
        .interval(4000)
        .indicator(true)
        .loop(true)
        .duration(1000)
        .itemSpace(0)
        .curve(Curve.Linear)

        /*金刚区*/
        Grid() {
          ForEach(this.tabsList, (item: TabsList) => {
            GridItem() {
              Column() {
                Image(item.icon)
                  .width(30)
                  .height(30)
                Text(item.name)
                  .margin({ top: 10 })
                  .fontSize(12)
              }
            }
          }, (item: TabsList) => item.name)
        }
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .backgroundColor('#fff')
        .height(160)
        .borderRadius(10)
        .margin({ top: 10 })
        .padding(10)
        .width('90%')

        /*公告*/
        Row() {
          Image($r('app.media.icon_toutiao'))
            .width(60)
          Divider().vertical(true).margin({ left: 10, right: 10 }).height(15)
          /*资讯标题  跑马灯*/
          Marquee({
            start: true,
            step: 2,
            loop: Infinity,
            fromStart: true,
            src: '双12活动预告双12活动预告双12活动预告'
          })
            .width('70%')
            .fontSize(14)
        }
        .backgroundColor('#fff')
        .borderRadius(10)
        .padding(10)
        .width('90%')
        .margin({ top: 10 })

        /*广告图*/
        Image($r('app.media.banner'))
          .margin({ top: 10 })
          .width('90%')
          .borderRadius(5)
          .onClick(() => {
            router.pushUrl({
              url: `pages/home/goods_info`,
              params: {
                id: 123
              }
            })
          })
        /*热门推荐*/
        Row() {
          Text('热门推荐').fontColor($r('app.color.color_primary')).fontWeight(700)
        }.margin({ top: 15,bottom: 15 })
        /*商品列表 瀑布流*/
        GoodsList()
      }.width('100%')
      .backgroundImage('https://php-b2c.likeshop.cn/uploads/images/202106011057029f7988147.jpg')
      .backgroundImageSize({ width: '100%' })
    }
    .height('100%')
    .backgroundColor('#f8f8f8')
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.Off) // 滚动条隐藏
    .edgeEffect(EdgeEffect.Spring)
  }
}