返回发烧友论坛
发 帖  

[文章]哎嘿！我实现了页面跳转功能！

玩硬件的女孩纸
2022-06-16 19:24:27
阅读量0
HarmonyOS
0
4
好久不见，我又回来啦~今天学习了 Hello HarmonyOS系列课第四期：Hello Ability从页面跳转开始。以上视频就是我的学习成果啦~

以一个“过来人”的身份保证，只要跟着老师一步一步学，实现这个页面跳转真的不难！偷偷告诉你们，以1.5倍速学习，只要半个小时就能学会（此处以小白为衡量标准，如果稍微有点代码基础的，估计10分钟左右即可学会）

现在我把一些重要的步骤分享给大家，供大家学习参考：

hml：写一些控件，进行一个布局设计
css：对每个控件做一个样式的控制
js：用来写逻辑部分

第一步：创建一个button
  1. <button class="btn" value="To Page2" onclick="toPage2"></button>
复制代码

对样式进行调整
  1. .btn{
  2.     font-size: 20px;
  3.     width: 300px;
  4.     height: 50px;
  5.     color:#000000 ;
  6.     background-color: cadetblue;
  7.     margin: 10px;
  8. }
复制代码

逻辑部分，首先需要加载一下
  1. import router from '@system.router';
复制代码

然后写函数
  1. toPage2(){
  2.     router.push({
  3.     uri:'pages/page2/page2'
  4.     })
复制代码

new一个page，就可以实现跳转啦~

如果想实现带参数跳转，可以这样操作：

还是建一个button
  1. <button class="btn" value="To Page2 with Params" onclick="toPage2withParams"></button>
复制代码

逻辑部分
  1. toPage2withParams(){
  2. router.push({
  3. uri:'pages/page2/page2',
  4. params:{
  5.        title: 'Huawei'
  6. }
复制代码

现在就成功的把参数值传到了第二个页面并进行显示。有感兴趣的伙伴儿们可以前往华为开发者课堂搜索《Hello HarmonyOS系列课》或点击链接华为开发者学堂-【Hello系列直播课】第4期：从页面跳转开始 (huawei.com)进行学习。

就酱，有空再更新……
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友