您现在的位置是：亿华云 > IT科技

鸿蒙提示框，对话框，路由跳转页面，跑马灯，幻灯片及list组件的应用

亿华云2025-10-02 18:51:10【IT科技】7人已围观

简介想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz幻灯片控件:<image-animator></image-an

想了解更多内容，鸿蒙话框请访问：

和华为官方合作共建的提示跳转鸿蒙技术社区

https://harmonyos.51cto.com/#zz

幻灯片控件:<image-animator></image-animator>

跑马灯控件: <marquee></marquee>

弹出提示框:prompt.showToast()

弹出对话框:prompt.showDialog()

在制作提示框的时候,首先制作一个菜单栏选项,弹出菜单栏仅有当调试点击后才触发显示出来不占用原有视图空间.弹出菜单栏的位置默认以(0,0)为基准点,为了更好的用户体验,也可以自行设置弹出位置(如下图)

介绍一种跳转页面新方法:路由跳转页面(具体见代码): import router from @system.router; //通过路由跳转页面

router.push({ uri: pages/jumpone/jumpone}) //路由的方法

主页面的js业务逻辑层:

import prompt from @system.prompt; import router from @system.router; //路由通过路由跳转页面 export default { data: { title: World, imgdatas:[{ "src":"http://ttjib3.natappfree.cc/images/12.jpeg" }, { "src":"http://ttjib3.natappfree.cc/images/13.jpg" }, { "src":"http://ttjib3.natappfree.cc/images/14.jpg" }, { "src":"http://ttjib3.natappfree.cc/images/15.jpg" }, { "src":"http://ttjib3.natappfree.cc/images/16.png" }] }, showmenu() { //弹出显示菜单首先要获取这个组件用 this.$element //this.$element("menueone").show(); //弹出的具体位置默认时以(0,0)为基准点 this.$element("menueone").show({ x:0, y:0 }); }, changemenu(e) { let name = e.value //这里的value就是hml中的云服务器提供商value //鸿蒙的提示框 prompt.showToast({ message:name }); if (name == "太和殿") { router.push({ //路由的方法 uri: pages/jumpone/jumpone }); } else if(name == "养心殿") { router.push({ //路由的方法 uri: pages/jumptwo/jumptwo }); } else if(name == "乾清宫") { router.push({ //路由的方法 uri: pages/jumpthree/jumpthree }); } } }

主页面视图层:

主页面css属性设置:

.container { width:100%; height: 1200px; display: flex; flex-direction: column; background-color: skyblue; } .topview{ width: 100%; height: 30%; border-bottom: 1px solid blue; } .image-animator{ width: 100%; height: 100%; } .contentview{ width: 100%; height: 10%; background-color: white; }

跳转页面一的js业务逻辑层:

import prompt from @system.prompt; export default { data: { title: World }, changmes() { //1.弹出提示框 // prompt.showToast() //2.弹出对话框 prompt.showDialog({ title:"问题", message:"你今年是否有600岁?", buttons:[{ "text":"是","color":"#000000"},{ "text":"否","color":"#000000"}], //用successs追踪对话框 success:function(data){ if(data.index==0){ prompt.showToast({ message:"你点击了是按钮" }) } if(data.index==1){ prompt.showToast({ message:"你点击了否按钮" }) } } }) } }

跳转页面一的视图层:

跳转页面二的源码库视图层:

<div class="container"> <marquee> 最是一年春好处,绝胜烟柳满皇都 </marquee> </div>

跳转页面三的js业务逻辑层:

import router from @system.router; export default { data: { title: World, listdatas:[{ "cname":"故宫典藏","cimg":"/common/gugong.png","lname":[{ "fname":"宫廷人物","icon":"/common/renwu.png"},{ "fname":"宫廷典制","icon":"/common/gugong.png"},{ "fname":"宫廷文创","icon":"/common/gongwenhua.png"},{ "fname":"宫廷建筑","icon":"/common/gu.png"}]}, { "cname":"故宫文创","cimg":"/common/gugong.png","lname":[]}, { "cname":"故宫建筑","cimg":"/common/gugong.png","lname":[]}, { "cname":"故宫历史","cimg":"/common/gugong.png","lname":[]} ] }, changemenu(e){ router.push({ uri:pages/gugongwenchuang/gugongwenchuang }) } }

跳转页面三的视图层:

<div class="container"> <list class="listview"> <block for="{ { listdatas}}"> <list-item-group class="group">  <list-item class="listitem"> <image class="img1" src="{ { $item.cimg}}"></image> <text class="txt1">{ { $item.cname}}</text> </list-item> <block for="{ { (cindx,cvalue) in $item.lname}}"> <list-item class="listitem1" onclick="changemenu"> <image class="img1" src="{ { cvalue.icon}}"></image> <text class="txt2">{ { cvalue.fname}}</text> </list-item> </block> </list-item-group> </block> </list> </div>

跳转页面三的css属性设置:

.container { width: 100%; height: 1200px; display: flex; flex-direction: column; background-color: skyblue; } .listview{ width: 100%; height: 100%; } .group{ width: 100%; } .listitem{ width: 100%; height: 25%; display: flex; justify-content:center; align-items: center; } .img1{ width: 80px; height: 80px; } .txt1{ font-size: 45px; font-weight: bold; font-family: sans-serif; margin-left: 70px; } .txt2{ font-size: 35px; font-family: sans-serif; margin-left: 70px; } .listitem1{ width: 100%; height: 18%; display: flex; justify-content:center; align-items: center; }

效果图如下,效果视频已上传专栏(HarmonyOS开发从0到1) https://harmonyos.51cto.com/column/35