内容摘要：想了解更多内容，请访问：和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz本文主要描述对鸿蒙幻灯片组件、跑马灯组件、提示框、提示菜单、页面跳转以及对话框

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

和华为官方战略合作共建的开发框和鸿蒙技术社区

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

本文主要描述对鸿蒙幻灯片组件、跑马灯组件、提对话提示框、示框提示菜单、提示页面跳转以及对话框的菜单应用

幻灯片组件：<image-animator>

视图及样式：

.container {     width: 100%;     height: 1500px;     display: flex;     flex-direction: column; } .c1{     width: 100%;     height: 35%; } .image-animator{     width: 100%;     height: 100%; } 

 业务逻辑层通过fetch请求向nginx反向代理服务请求所需数据

import fetch from @system.fetch; export default {     data: {         imagesDatas:[]     },     onInit(){         fetch.fetch({             //url对应的地址为通过内网穿透工具natapp映射出的nginx反向代理服务的地址             url:http://ibk3v7.natappfree.cc/text/images0.json,             responseType:"json",             success:(resp)=>{                 let datas = JSON.parse(resp.data);                 this.imagesDatas = datas.imagedatas;             }         });     } 

 images0.json文件中定义的数据：

效果图(图片是可以自动播放的)：

跑马灯组件：<marquee>

<div class="container">     <marquee>金牛辞旧岁，亿华云万里贺新春。鸿蒙鸿蒙让快乐与你同行，开发框和让健康与你相伴，提对话将美好与团圆满满托付于你</marquee> </div> 

 效果图：

鸿蒙的示框弹出菜单、提示框、提示页面跳转的菜单应用

视图和样式：

                                      我是个点击按钮                         aaa          bbb          ccc       

.container {     width: 100%;     height: 1500px;     display: flex;     flex-direction: column; } .c1{     width: 100%;     height: 35%; } .c2{     width: 100%;     height: 8%; } 

 业务逻辑层：

import prompt from @system.prompt; import router from @system.router; export default {     data: {     },     //点击按钮触发 弹出显示菜单 事件     clickbutton(){         //显示id为 menuid 的菜单，此菜单出现位置默认为屏幕左上角原点，鸿蒙鸿蒙可通过在show()中添加坐标来改变         //this.$element("menuid").show();         this.$element("menuid").show({             x:100,开发框和             y:550         });     },     //选中弹出菜单中的项触发事件     selectmenu(e){         let path = e.value;         //鸿蒙的b2b供应网提示框         prompt.showToast({             message:path         });         if(path=="aaa"){             //鸿蒙提供的页面跳转             router.push({                 uri:pages/aaa/aaa             });         }else if(path=="bbb"){             router.push({                uri:pages/bbb/bbb             });         }else if(path=="ccc"){             router.push({                uri:pages/ccc/ccc             });         }     } } 

 效果图(点击按钮弹出菜单后点击对应菜单触发跳转页面的事件)：

鸿蒙的对话框

视图和样式：

<div class="container">     <button onclick="onclick">我是另一个点击按钮</button> </div> 

 逻辑层：

import prompt from @system.prompt; export default {     data: {     },     onclick(){         //鸿蒙的对话框         prompt.showDialog({             title:"对话框",             message:"确定删除这条消息么？",             buttons:[{"text":"确定","color":"#00E5EE"},                      {"text":"取消","color":"#00E5EE"}],             success:function(e){                 if(e.index==0){                     //鸿蒙的提示框                     prompt.showToast({                         message:"您点击了确定"                     });                 }else if(e.index==1){                     prompt.showToast({                         message:"您点击了取消"                     });                 }             }         });     } } 

 效果图：

 

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，提对话请注明出处，否则将追究法律责任。

想了解更多内容，请访问：

和华为官方战略合作共建的鸿蒙技术社区

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

WordPress模板