《农物购》app开发技术分享《五》-- HarmonyOS 鸿蒙Next资讯中心列表&资讯详情

在上一节我们在首页新增了资讯中心的模块，首页的内容越来越丰富了，这一节针对资讯中心模块的一些跳转功能，做一个进一步的延伸，我们知道资讯中心模块分为上下两部分，那么我们的上下两部分的点击事件响应也是不一样的，头部的点击相应是跳转到资讯列表页，再次点击列表，跳转到新闻详情页面，而下半部分的资讯条目点击之后是直接跳转到对应的新闻页面的。接下来我们来看一下我们要实现的成品是什么样式

资讯列表页

可以看到是列表类型的一个页面，当点击条目的时候跳转到新闻详情，我们看一下新闻详情页面

这样的话，那我们要实现的内容也非常的清晰了。

我们直接先创建一个新的页面来加载对应的资讯列表

然后我们在头布局的地方添加跳转代码

.onClick(()=>{
  router.pushUrl({url:“pages/NewListPage”})
})

这样就能实现一个点击跳转的功能

然后实现列表代码，在条目中也添加跳转逻辑，跳转到详情页面

import { router } from ‘@kit.ArkUI’

@Entry
@Component
struct NewListPage {
private imgList:ESObject[]=[
{“img”:“https://inews.gtimg.com/om_bt/OtwKRSDaiFoI7MaxtLQAjKPk9HFwww6tMYybn1BjzxWCEAA/641” ,
“title”:“蔬菜也能“紫气东来”？”,
“timeStr”:“2024-12-31”,
“url”:“https://news.qq.com/rain/a/20241231A04JV800”},
{<span class="hljs-string">"img"</span>:<span class="hljs-string">"https://inews.gtimg.com/om_bt/O-8DmkSZrXGMvRVD0SCG6VDXdQoF0zXmTJZA1AwTaNZhMAA/641"</span> ,
  <span class="hljs-string">"title"</span>:<span class="hljs-string">"洪山菜薹成江城蔬菜顶流"</span>,
  <span class="hljs-string">"timeStr"</span>:<span class="hljs-string">"2024-12-30"</span>,
  <span class="hljs-string">"url"</span>:<span class="hljs-string">"https://news.qq.com/rain/a/20241230A01SRF00"</span>}
]
build() {
Column() {
Text(“资讯中心”)
.width(‘100%’)
.height(45)
.fontSize(20)
.textAlign(TextAlign.Center)
List({space:10}) {
ForEach(this.imgList, (item: ESObject, index: number) => {
ListItem(){
Column(){
Image(item.img).width(‘100%’).height(120)
.borderRadius(10)
Text(item.title)
.fontSize(16)
.margin({top:10})
          Text(item.timeStr)
            .margin({top:<span class="hljs-number">5</span>})

        }
        .onClick(()=&gt;{
          router.pushUrl({
            url:<span class="hljs-string">"pages/WebDetailsPage"</span>,
            params:item})
        })
        .alignItems(HorizontalAlign.Start)
        .padding(<span class="hljs-number">10</span>)
      }
    })
  }
}
.height(<span class="hljs-string">'100%'</span>)
.width(<span class="hljs-string">'100%'</span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这样我们资讯中心列表页面就实现了列表的展示，保存代码看一下预览器效果

可以看到列表已经展示出来了，接下来实现点击跳转到资讯详情页面

我们还需要新建一个资讯详情页面，代码实现如下

{“img”:“https://inews.gtimg.com/om_bt/O-8DmkSZrXGMvRVD0SCG6VDXdQoF0zXmTJZA1AwTaNZhMAA/641” ,
  “title”:“洪山菜薹成江城蔬菜顶流”,
  “timeStr”:“2024-12-30”,
  “url”:“https://news.qq.com/rain/a/20241230A01SRF00”}

从数据源中我们可以看到有url字段，数据源中的字段是一个链接，那我们用webview来执行链接的加载，首先在列表条目上添加一个跳转传值的方法

.onClick(()=>{
router.pushUrl({
url:“pages/WebDetailsPage”,
params:item})
})
把当前的对象传递过去
然后在新的页面进行接收和webview对链接的加载,因为加载的链接，在webview中注意添加配置避免白屏

实现详情页面逻辑

import { webview } from ‘@kit.ArkWeb’;
import { router } from ‘@kit.ArkUI’;

@Entry
@Component
struct WebDetailsPage {
@State urls: ESObject= null!;
@State mode: MixedMode = MixedMode.All;
aboutToAppear(): void {
this.urls= router.getParams() as ESObject
}
webController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src:this.urls.url, controller: this.webController })
.height(‘100%’)
.width(‘100%’)
.mixedMode(this.mode)
.domStorageAccess(true)
}
.height(<span class="hljs-string">'100%'</span>)
.width(<span class="hljs-string">'100%'</span>)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这时候点击一条信息，展示如下

可以看到已经正确的展示资讯的详细内容了