HarmonyOS NEXT 实战系列

实现步骤：

准备 ForEach 遍历数据的页面

使用 http 获取数据渲染

落地代码：

准备 ForEach 遍历数据的页面

interface News {
  id: number
  title: string
  source: string
  cmtcount: number
  img: string
  time: string
}
 
@Entry
@Component
struct Index {
  @State newsList: News[] = [{
    "id": 1,
    "title": "5G渗透率持续提升，创新业务快速成长",
    "source": "新京报经济新闻",
    "cmtcount": 58,
    "img": ".webp",
    "time": "2222-10-28 11:50:28"
  }]
 
  build() {
    List({ space: 10 }) {
      ForEach(this.newsList, (news: News) => {
        ListItem() {
          Row({ space: 10 }) {
            Column() {
              Text(news.title)
                .fontSize(16)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .maxLines(3)
 
              Row({ space: 10 }) {
                Text(news.source)
                  .textExtend()
                Text(`${news.cmtcount}评论`)
                  .textExtend()
                Blank()
 
                Text(news.time.split(' ')[0])
                  .textExtend()
              }
              .width('100%')
 
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .alignItems(HorizontalAlign.Start)
            .height(80)
            .layoutWeight(1)
 
            Image(news.img)
              .width(110)
              .height(80)
              .borderRadius(10)
          }
          .padding(10)
        }
        .backgroundColor(Color.White)
      })
    }
    .padding(10)
    .height('100%')
    .width('100%')
    .backgroundColor('#F0F0F0')
  }
}
 
@Extend(Text)
function textExtend() {
  .fontColor(Color.Gray)
  .fontSize(12)
  .textAlign(TextAlign.Start)
}

使用 http 获取数据渲染

interface NewsResponse {
  message: string
  data: News[]
}
  aboutToAppear(): void {
    this.getData()
  }
 
  async getData() {
    const req = http.createHttp()
    const res = await req.request('')
    const result = JSON.parse(res.result.toString()) as NewsResponse
    this.newsList = result.data
    req.destroy()
  }

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：