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

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

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为金林企业提供专业的成都网站设计、做网站，金林网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

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

https://harmonyos./#zz

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

幻灯片组件：

视图及样式：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.         
    4. 
  
  
  
  
  4.         
    5. 
  
  
  
  
  5.         
    6. 
  
  
  
  
  6.     

  •  
 
 
 
      
  
  
  
  
    1. .container {
      2. 
  
  
  
  
    2.     width: 100%;
      3. 
  
  
  
  
    3.     height: 1500px;
      4. 
  
  
  
  
    4.     display: flex;
      5. 
  
  
  
  
    5.     flex-direction: column;
      6. 
  
  
  
  
    6. }
      7. 
  
  
  
  
    7. .c1{
      8. 
  
  
  
  
    8.     width: 100%;
      9. 
  
  
  
  
    9.     height: 35%;
      10. 
  
  
  
  
    10. }
      11. 
  
  
  
  
    11. .image-animator{
      12. 
  
  
  
  
    12.     width: 100%;
      13. 
  
  
  
  
    13.     height: 100%;
      14. 
  
  
  
  
    14. }
      15.

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

     
 
 
 
      
  
  
  
  
    1. import fetch from '@system.fetch';
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default {
      4. 
  
  
  
  
    4.     data: {
      5. 
  
  
  
  
    5.         imagesDatas:[]
      6. 
  
  
  
  
    6.        
      7. 
  
  
  
  
    7.     },
      8. 
  
  
  
  
    8. 
  
  
  
  
    9.     onInit(){
      10. 
  
  
  
  
    10.         fetch.fetch({
      11. 
  
  
  
  
    11.             //url对应的地址为通过内网穿透工具natapp映射出的nginx反向代理服务的地址
      12. 
  
  
  
  
    12.             url:'http://ibk3v7.natappfree.cc/text/images0.json',
      13. 
  
  
  
  
    13.             responseType:"json",
      14. 
  
  
  
  
    14.             success:(resp)=>{
      15. 
  
  
  
  
    15.                 let datas = JSON.parse(resp.data);
      16. 
  
  
  
  
    16.                 this.imagesDatas = datas.imagedatas;
      17. 
  
  
  
  
    17. 
  
  
  
  
    18.             }
      19. 
  
  
  
  
    19.         });
      20. 
  
  
  
  
    20.     }
      21.

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

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

    跑马灯组件：

      
 
 
 
      
   
  
  
  
      2. 
   
  
  
  
    2.     金牛辞旧岁，万里贺新春。让快乐与你同行，让健康与你相伴，将美好与团圆满满托付于你
      3. 
   
  
  
  
    3.

     效果图：

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

    视图和样式：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.         
      4. 
  
  
  
  
      5. 
  
  
  
  
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.         我是个点击按钮
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.         aaa
      13. 
  
  
  
  
    13.         bbb
      14. 
  
  
  
  
    14.         ccc
      15. 
  
  
  
  
    15.     
      16. 
  
  
  
  
    16. 
  
  
  
  
    17. 
 
 
 
 

       
 
 
 
      
    
  
  
  
    1. .container {
      2. 
    
  
  
  
    2.     width: 100%;
      3. 
    
  
  
  
    3.     height: 1500px;
      4. 
    
  
  
  
    4.     display: flex;
      5. 
    
  
  
  
    5.     flex-direction: column;
      6. 
    
  
  
  
    6. }
      7. 
    
  
  
  
    7. .c1{
      8. 
    
  
  
  
    8.     width: 100%;
      9. 
    
  
  
  
    9.     height: 35%;
      10. 
    
  
  
  
    10. }
      11. 
    
  
  
  
    11. .c2{
      12. 
    
  
  
  
    12.     width: 100%;
      13. 
    
  
  
  
    13.     height: 8%;
      14. 
    
  
  
  
    14. }
      15.

     业务逻辑层：

     
 
 
 
      
  
  
  
  
    1. import prompt from '@system.prompt';
      2. 
  
  
  
  
    2. import router from '@system.router';
      3. 
  
  
  
  
    3. export default {
      4. 
  
  
  
  
    4.     data: {
      5. 
  
  
  
  
    5.     },
      6. 
  
  
  
  
    6. 
  
  
  
  
    7.     //点击按钮触发 弹出显示菜单 事件
      8. 
  
  
  
  
    8.     clickbutton(){
      9. 
  
  
  
  
    9.         //显示id为 menuid 的菜单，此菜单出现位置默认为屏幕左上角原点，可通过在show()中添加坐标来改变
      10. 
  
  
  
  
    10.         //this.$element("menuid").show();
      11. 
  
  
  
  
    11. 
  
  
  
  
    12.         this.$element("menuid").show({
      13. 
  
  
  
  
    13.             x:100,
      14. 
  
  
  
  
    14.             y:550
      15. 
  
  
  
  
    15.         });
      16. 
  
  
  
  
    16. 
  
  
  
  
    17.     },
      18. 
  
  
  
  
    18.     //选中弹出菜单中的项触发事件
      19. 
  
  
  
  
    19.     selectmenu(e){
      20. 
  
  
  
  
    20.         let path = e.value;
      21. 
  
  
  
  
    21.         //鸿蒙的提示框
      22. 
  
  
  
  
    22.         prompt.showToast({
      23. 
  
  
  
  
    23.             message:path
      24. 
  
  
  
  
    24.         });
      25. 
  
  
  
  
    25. 
  
  
  
  
    26.         if(path=="aaa"){
      27. 
  
  
  
  
    27.             //鸿蒙提供的页面跳转
      28. 
  
  
  
  
    28.             router.push({
      29. 
  
  
  
  
    29.                 uri:'pages/aaa/aaa'
      30. 
  
  
  
  
    30.             });
      31. 
  
  
  
  
    31. 
  
  
  
  
    32.         }else if(path=="bbb"){
      33. 
  
  
  
  
    33.             router.push({
      34. 
  
  
  
  
    34.                uri:'pages/bbb/bbb'
      35. 
  
  
  
  
    35.             });
      36. 
  
  
  
  
    36.         }else if(path=="ccc"){
      37. 
  
  
  
  
    37.             router.push({
      38. 
  
  
  
  
    38.                uri:'pages/ccc/ccc'
      39. 
  
  
  
  
    39.             });
      40. 
  
  
  
  
    40.         }
      41. 
  
  
  
  
    41.     }
      42. 
  
  
  
  
    42. }
      43.

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

    鸿蒙的对话框

    视图和样式：

      
 
 
 
      
   
  
  
  
      2. 
   
  
  
  
    2.     我是另一个点击按钮
      3. 
   
  
  
  
    3.

     逻辑层：

     
 
 
 
      
  
  
  
  
    1. import prompt from '@system.prompt';
      2. 
  
  
  
  
    2. export default {
      3. 
  
  
  
  
    3.     data: {
      4. 
  
  
  
  
    4. 
  
  
  
  
    5.     },
      6. 
  
  
  
  
    6.     onclick(){
      7. 
  
  
  
  
    7.         //鸿蒙的对话框
      8. 
  
  
  
  
    8.         prompt.showDialog({
      9. 
  
  
  
  
    9.             title:"对话框",
      10. 
  
  
  
  
    10.             message:"确定删除这条消息么？",
      11. 
  
  
  
  
    11.             buttons:[{"text":"确定","color":"#00E5EE"},
      12. 
  
  
  
  
    12.                      {"text":"取消","color":"#00E5EE"}],
      13. 
  
  
  
  
    13.             success:function(e){
      14. 
  
  
  
  
    14.                 if(e.index==0){
      15. 
  
  
  
  
    15.                     //鸿蒙的提示框
      16. 
  
  
  
  
    16.                     prompt.showToast({
      17. 
  
  
  
  
    17.                         message:"您点击了确定"
      18. 
  
  
  
  
    18.                     });
      19. 
  
  
  
  
    19.                 }else if(e.index==1){
      20. 
  
  
  
  
    20.                     prompt.showToast({
      21. 
  
  
  
  
    21.                         message:"您点击了取消"
      22. 
  
  
  
  
    22.                     });
      23. 
  
  
  
  
    23.                 }
      24. 
  
  
  
  
    24.             }
      25. 
  
  
  
  
    25.         });
      26. 
  
  
  
  
    26.     }
      27. 
  
  
  
  
    27. }
      28.

     效果图：

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

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

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

    https://harmonyos./#zz

    当前题目：鸿蒙JS开发6鸿蒙的提示框、对话框和提示菜单的应用
    网页路径：http://www.shufengxianlan.com/qtweb/news16/261616.html

    成都网站建设公司_创新互联，为您提供关键词优化、python、云服务器、网站排名、网站导航、微信公众号

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站建设知识

    分类信息网站

    成都托管服务器　　 　国泰民安消防　　 　成都网站安全运维　　 　商城网站建设　　 　成都谷歌SEO　　 　免备案空间　　 　合江网站建设　　 　成都微信二次开发　　 　重庆网站建设　　 　蜜朵婚庆　　 　丹棱网站建设　　 　卖链接　　 　手机网站建设套餐　　 　木包装箱　　 　葆金莱自动门　　 　成都服务器租赁　　 　网站建设报价方案　　 　成都画册设计　　 　四川正泰动物　　 　达州网站建设