鸿蒙OS 5 - 新闻APP - 首页
1 分•作者: zhousg•6 个月前
HarmonyOS 5 新闻应用首页实现案例研究
摘要
本文介绍了如何在 HarmonyOS 5 上实现新闻应用首页。使用提供的 ArkTS 代码，首页界面包括轮播新闻展示、推荐新闻列表，并支持点击“查看全部”时导航到新闻列表页面。
```
@Entry
@Component
struct PreviewPage {
@State list: NewsModel[] = mockData
@Builder
PagesMap(name: string) {
if (name === 'NewsListPage') {
NewsListPage()
}
}
@Builder
BreakingNewsBuilder() {
Column() {
TitleBar({ category: 'All', title: 'Breaking News' })
Swiper() {
ForEach( this .list, (item: NewsModel) => {
BannerNewsItem({ news: item })
})
}
.itemSpace(20)
.safeAreaPadding({ left: 15, right: 15, bottom: 40 })
}
}
@Builder
RecommendNewsBuilder() {
Column() {
TitleBar({ category: 'All', title: 'Recommendation' })
Column({ space: 12 }) {
ForEach( this .list, (item: NewsModel) => {
ListNewsItem({ news: item })
})
}
}
}
build() {
Navigation(pathStack) {
List() {
ListItem() {
this .BreakingNewsBuilder()
}
ListItem() {
this .RecommendNewsBuilder()
}
}
.width('100%')
.height('100%')
}
.mode(NavigationMode.Stack)
.navDestination( this .PagesMap)
.hideToolBar( true )
}
}
```
查看原文
Case Study of Implementing the Home Page of a News App on HarmonyOS 5
Abstract
This article introduces how to implement the home page of a news app on HarmonyOS 5. Using the provided ArkTS code, the home - page interface includes a carousel news display, a recommended news list, and supports navigating to the news list page when clicking "View all".<p>@Entry
@Component
struct PreviewPage {
@State list: NewsModel[] = mockData<p><pre><code> @Builder
PagesMap(name: string) {
if (name === 'NewsListPage') {
NewsListPage()
}
}
@Builder
BreakingNewsBuilder() {
Column() {
TitleBar({ category: 'All', title: 'Breaking News' })
Swiper() {
ForEach( this .list, (item: NewsModel) => {
BannerNewsItem({ news: item })
})
}
.itemSpace(20)
.safeAreaPadding({ left: 15, right: 15, bottom: 40 })
}
}
@Builder
RecommendNewsBuilder() {
Column() {
TitleBar({ category: 'All', title: 'Recommendation' })
Column({ space: 12 }) {
ForEach( this .list, (item: NewsModel) => {
ListNewsItem({ news: item })
})
}
}
}
build() {
Navigation(pathStack) {
List() {
ListItem() {
this .BreakingNewsBuilder()
}
ListItem() {
this .RecommendNewsBuilder()
}
}
.width('100%')
.height('100%')
}
.mode(NavigationMode.Stack)
.navDestination( this .PagesMap)
.hideToolBar( true )
}
}</code></pre>