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

鸿蒙JS开发6鸿蒙的提示框、对话框和提示菜单应用

时间：2023-03-23 11:12:17 科技观察

更多内容请访问：Harmonyos.51cto.com/#Harmonyos.51cto.com/#zz本文主要介绍鸿蒙滑动组件的应用，跑马灯组件、提示框、提示菜单、页面跳转、对话框。幻灯片组件：视图和样式：

.container{width:100%;height:1500px;display:flex;flex-direction:column;}.c1{width:100%;height:35%;}.image-animator{width:100%;height:100%;}业务逻辑层通过fetchrequest向nginx反向代理服务请求所需数据importfetchfrom'@system.fetch';exportdefault{data:{imagesDatas:[]},onInit(){fetch.fetch({//url对应的地址为内网穿透映射的nginx反向代理服务地址工具natappurl:'http://ibk3v7.natappfree.cc/text/images0.json',responseType:"json",success:(resp)=>{letdatas=JSON.parse(resp.data);this.imagesDatas=datas.imagedatas;}});}images0.json文件中定义的数据：rendering（图片可以自动播放）：marquee组件：<marquee>金牛辞旧岁，万里迎新年让快乐与你同在，让健康与你同在，把美丽与幸福托付给你

效果图：鸿蒙的弹出菜单、提示框、应用视图及页面跳转样式：

我是点击按钮/div>aaabbbccc.container{width:100%;height:1500px;display:flex;flex-direction:column;}.c1{width:100%;height:35%;}.c2{width:100%;height:8%;}业务逻辑层：importpromptfrom'@system.prompt';importrouterfrom'@system.router';exportdefault{data:{},//点击按钮触发弹出显示菜单事件clickbutton(){//显示id为menuid的菜单。这个菜单的默认位置是屏幕左上角的原点，可以在show()//this.$element("menuid").show();this.$element("menuid").show({x:100,y:550});},//选择弹出菜单中的item触发事件selectmenu(e){letpath=e.value;//鸿蒙的提示boxprompt.showToast({message:path});if(path=="aaa"){//鸿蒙提供的页面跳转router.push({uri:'pages/aaa/aaa'});}elseif(path=="bbb"){router.push({uri:'pages/bbb/bbb'});}elseif(path="ccc"){router.push({uri:'pages/ccc/ccc'});}}}效果图（点击按钮弹出菜单点击对应菜单触发跳转页面事件）：鸿蒙的对话框视图及样式：我又是一个点击按钮逻辑层：importpromptfrom'@system.prompt';exportdefault{data:{},onclick(){//鸿蒙的dialogprompt.showDialog({title:"Dialog",message:"你确定要删除吗smessage?",buttons:[{"text":"OK","color":"#00E5EE"},{"text":"Cancel","color":"#00E5EE"}],success:function(e){if(e.index==0){//鸿蒙的提示框prompt.showToast({message:"你点了OK"});}elseif(e.index==1){prompt.showToast({message:"Youclickedtocancel"});}}});}}效果图：?版权归作者及鸿蒙技术社区所有。如需转载请注明出处，否则将追究法律责任更多内容请访问：与华为官方战略合作共建鸿蒙科技社区https://harmonyos.51cto.com/#zz

上一篇：物联网安全：为什么传感器会积累如此多的敏感数据

下一篇：第二季度出货量未达预期芯片短缺已影响服务器行业

鸿蒙JS开发6鸿蒙的提示框、对话框和提示菜单应用相关文章

最新推荐

猜你喜欢