HarmonyOS5-新闻应用-主页
新闻应用主页在HarmonyOS 5上的实现案例研究
摘要
本文介绍了如何在HarmonyOS 5上实现新闻应用的主页。使用提供的ArkTS代码，主页界面包括一个轮播新闻展示、推荐新闻列表，并支持在点击“查看全部”时导航到新闻列表页面。
```typescript
@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>