当前位置: 首页 > 科技观察

鸿蒙提示框、对话框、路由跳转页、跑马灯、幻灯片和列表组件的应用

时间:2023-03-22 16:52:56 科技观察

更多内容请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zzSlide控件:跑马灯控件:弹出提示框:prompt.showToast()弹出对话框:prompt.showDialog()制作提示框时,先创建一个菜单栏选项,弹出菜单栏只在debug点击时触发显示不占用原始视图空间。弹出菜单栏的位置默认以(0,0)为参考点。为了更好的用户体验,也可以自行设置弹窗位置(如下图)引入新的跳页方式:路由跳转页面(详见代码):importrouterfrom'@system。路由器';//通过路由跳转页面router.push({uri:'pages/jumpone/jumpone'})//路由方法主页表面上的js业务逻辑层:importpromptfrom'@system.prompt';importrouterfrom'@system.router';//通过路由跳转页面exportdefault{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){letname=e.value//这里的值为hml中的值//鸿蒙提示框prompt.showToast({message:name});if(name=="太和殿"){router.push({//路由方法uri:'pages/jumpone/jumpone'});}elseif(name=="养心店"){router.push({//路由方法uri:'pages/jumptwo/jumptwo'});}elseif(name=="干清宫"){router.push({//路由方法uri:'pages/jumpthree/jumpthree'});}}}主页视图层:

菜单
太和店养心店Qianqinggong
主页面css属性设置:.container{width:100%;height:1200px;display:flex;flex-direction:column;background-color:skyblue;}.topview{width:100%;height:30%;border-bottom:1pxsolidblue;}.image-animator{width:100%;height:100%;}.contentview{width:100%;height:10%;background-color:white;}跳转页面1的js业务逻辑层:importpromptfrom'@system.prompt';exportdefault{data:{title:'World'},changmes(){//1.弹出提示框//prompt.showToast()//2.弹出对话框prompt.showDialog({title:"问题",message:"你今年600岁了吗?",buttons:[{"text":"Yes","color":"#000000"},{"text":"No","color":"#000000"}],//跟踪成功的对话success:function(data){if(data.index==0){prompt.showToast({message:"YouclickedtheYesbutton"})}if(data.index==1){prompt.showToast({message:"YouclickedtheNobutton"})}}})}}跳转到视图层第1页:太和殿
跳转到第二页的视图层:最受益的是春天跳转到第3页的js业务逻辑层:importrouterfrom'@system.router';exportdefault{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'})}}跳转到第3页的视图层:{{$item.cname}}{{cvalue.fname}}跳转页面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://和谐。51cto.com/column/35?版权归作者及鸿蒙技术社区所有。如需转载请注明出处,否则将追究法律责任。了解更多请访问:与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz