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": "http://ajax-api.itheima.net/images/0.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('http://hmajax.itheima.net/api/news') const result = JSON.parse(res.result.toString()) as NewsResponse this.newsList = result.data req.destroy() }

Mar 20, 2025 - 04:38

实现步骤：

准备 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": "http://ajax-api.itheima.net/images/0.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('http://hmajax.itheima.net/api/news')
    const result = JSON.parse(res.result.toString()) as NewsResponse
    this.newsList = result.data
    req.destroy()
  }