HarmonyOS 鸿蒙Next Grid小模块如何实现页面跳转 比如一人一档跳转到相对应应用页面 求大佬指教 用的是ArkTs

HarmonyOS 鸿蒙Next Grid小模块如何实现页面跳转 比如一人一档跳转到相对应应用页面 求大佬指教 用的是ArkTs

Grid() {
  ForEach(mainViewModel.getFirstGridData(), (item: ItemData) => {
    GridItem() {
      Column() {
        Image(item.img)
          .width($r('app.float.home_homeCell_size'))
          .height($r('app.float.home_homeCell_size'))
        Text(item.title)
          .fontSize($r('app.float.little_text_size'))
          .margin({ top: $r('app.float.home_homeCell_margin') })
          .onClick(()=>{
            // console.log(''+ Text(item.title))
            for(const key in item){
              // console.log(obj[key],'11')
              console.log(key , item[key])
              // 获取要传递的数据
            }
            // console.log(item,'data 获取数据ß')

          })
      }
    }
  }, (item: ItemData) => JSON.stringify(item))
}

更多关于HarmonyOS 鸿蒙Next Grid小模块如何实现页面跳转 比如一人一档跳转到相对应应用页面 求大佬指教 用的是ArkTs的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

在你的PageResource.ets类里多加一个属性

比如

page：string

然后在你的MainViewModel里，new PageResource 的时候，把page属性传上

然后onClick需要跳转的时候

router.pushUrl({ url: item.page })

记得import router

更多关于HarmonyOS 鸿蒙Next Grid小模块如何实现页面跳转 比如一人一档跳转到相对应应用页面 求大佬指教 用的是ArkTs的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你这种方法，直接报错了！
你之前做过这个类型的应用吗？
有代码吗？
我学习一下，

留个联系方式，我写给demo给你，

我的个人简介里有微信号， 回复给你发表相关信息，发不了。

data.jpg

给你的ItemData再加一个属性
比如：page:“pages/Test1”
然后点击时：router.pushUrl({ url: item.page })

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

这8个小模块，怎么进行跳转的判断？大神，能不能把代码写的具体些，

你的ItemData类型的item参数上不是img和title属性吗，想办法再加个属性，比如page，用来保存要跳转的页面，类型为字符串，在循环中点击时，添加代码执行 router.pushUrl({ url: item.page }) 即可，

姓名：张三 职位：软件工程师 简介：具有五年软件开发经验，熟悉Java和Python。

在HarmonyOS鸿蒙Next中，使用ArkTS实现Grid小模块的页面跳转，可以通过router模块来完成。假设你有一个Grid布局，每个网格项对应一个应用页面，点击网格项时跳转到相应的应用页面。

首先，在EntryAbility.ts中定义页面的路由信息：

import router from '@ohos.router';

export default class EntryAbility extends Ability {
    onCreate(want, launchParam) {
        console.log('EntryAbility onCreate');
        router.push({
            url: 'pages/IndexPage'
        });
    }
}

在IndexPage.ets中，定义Grid布局和点击事件处理函数：

import router from '@ohos.router';

@Entry
@Component
struct IndexPage {
    build() {
        Column() {
            Grid() {
                GridItem() {
                    Text('应用1')
                        .onClick(() => {
                            router.push({
                                url: 'pages/App1Page'
                            });
                        });
                }
                GridItem() {
                    Text('应用2')
                        .onClick(() => {
                            router.push({
                                url: 'pages/App2Page'
                            });
                        });
                }
            }
            .columnsTemplate('1fr 1fr')
            .rowsTemplate('1fr 1fr')
        }
    }
}

在App1Page.ets和App2Page.ets中分别定义应用页面的内容：

@Entry
@Component
struct App1Page {
    build() {
        Column() {
            Text('应用1页面');
        }
    }
}

@Entry
@Component
struct App2Page {
    build() {
        Column() {
            Text('应用2页面');
        }
    }
}

通过这种方式，点击Grid中的网格项时，会通过router.push方法跳转到相应的应用页面。

回到顶部