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()
}
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146199656
