HarmonyOS 鸿蒙Next 如何实现点击图片跳转

HarmonyOS 鸿蒙Next 如何实现点击图片跳转 原页面使用grid组件for each四张图片，然后我想通过点击其中一张图片跳转到新的页面应该采用什么方法

3 回复

undefined

更多关于HarmonyOS 鸿蒙Next 如何实现点击图片跳转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


.onclick(()=>{
router.pushUrl({
“url”:“页面路径”
})
})

[@ohos.router (页面路由)-UI界面-ArkTS接口参考-ArkTS API参考-HarmonyOS应用开发](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-apis-router-0000001478061893-V3?catalogVersion=V3)

在HarmonyOS（鸿蒙）Next中，实现点击图片跳转的功能可以通过使用Image组件和Router模块来完成。首先，你需要在页面中定义一个Image组件，并为其设置点击事件监听器。然后，在点击事件的处理函数中，使用Router模块进行页面跳转。

以下是一个简单的代码示例：

import { Image, Touchable } from '@ohos.arkui';
import router from '@ohos.router';

@Entry
@Component
struct ImageJumpPage {
  build() {
    Column() {
      Touchable({
        onClick: () => {
          router.push({
            url: 'pages/TargetPage' // 目标页面的路径
          });
        }
      }) {
        Image($r('app.media.my_image')) // 图片资源
          .width(100)
          .height(100)
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

在这个示例中，Image组件用于显示图片，Touchable组件用于监听点击事件。当用户点击图片时，onClick事件会被触发，调用router.push方法跳转到目标页面。url参数指定了目标页面的路径。

需要注意的是，目标页面的路径需要在pages目录下定义，并且在config.json文件中进行配置。

回到顶部