189 8069 5689

鸿蒙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.cdxtjz.cn/article/dpisegp.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 点金石文化   成都柴油发电机   成都网站推广   户内外广告招牌   智能蒸汽能机   乐山服务器托管   广安网站建设   网络推广外包   资阳发电机维修   企业VI设计   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用