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

阅读量0
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)进行学习。

就酱,有空再更新……

回帖

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