日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鴻蒙JS開發(fā)6鴻蒙的提示框、對話框和提示菜單的應(yīng)用

想了解更多內(nèi)容，請?jiān)L問：

創(chuàng)新互聯(lián)長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為金林企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，金林網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos./#zz

本文主要描述對鴻蒙幻燈片組件、跑馬燈組件、提示框、提示菜單、頁面跳轉(zhuǎn)以及對話框的應(yīng)用

幻燈片組件：

視圖及樣式：

 
 
 
 
    
  
  
  
  
    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.

     業(yè)務(wù)邏輯層通過fetch請求向nginx反向代理服務(wù)請求所需數(shù)據(jù)

     
 
 
 
      
  
  
  
  
    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對應(yīng)的地址為通過內(nèi)網(wǎng)穿透工具natapp映射出的nginx反向代理服務(wù)的地址
      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文件中定義的數(shù)據(jù)：

    效果圖(圖片是可以自動(dòng)播放的)：

    跑馬燈組件：

      
 
 
 
      
   
  
  
  
      2. 
   
  
  
  
    2.     金牛辭舊歲，萬里賀新春。讓快樂與你同行，讓健康與你相伴，將美好與團(tuán)圓滿滿托付于你
      3. 
   
  
  
  
    3.

     效果圖：

    鴻蒙的彈出菜單、提示框、頁面跳轉(zhuǎn)的應(yīng)用

    視圖和樣式：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.     
      3. 
  
  
  
  
    3.         
      4. 
  
  
  
  
      5. 
  
  
  
  
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.         我是個(gè)點(diǎn)擊按鈕
      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.

     業(yè)務(wù)邏輯層：

     
 
 
 
      
  
  
  
  
    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.     //點(diǎn)擊按鈕觸發(fā) 彈出顯示菜單 事件
      8. 
  
  
  
  
    8.     clickbutton(){
      9. 
  
  
  
  
    9.         //顯示id為 menuid 的菜單，此菜單出現(xiàn)位置默認(rèn)為屏幕左上角原點(diǎn)，可通過在show()中添加坐標(biāo)來改變
      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.     //選中彈出菜單中的項(xiàng)觸發(fā)事件
      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.             //鴻蒙提供的頁面跳轉(zhuǎn)
      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.

     效果圖(點(diǎn)擊按鈕彈出菜單后點(diǎn)擊對應(yīng)菜單觸發(fā)跳轉(zhuǎn)頁面的事件)：

    鴻蒙的對話框

    視圖和樣式：

      
 
 
 
      
   
  
  
  
      2. 
   
  
  
  
    2.     我是另一個(gè)點(diǎn)擊按鈕
      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:"您點(diǎn)擊了確定"
      18. 
  
  
  
  
    18.                     });
      19. 
  
  
  
  
    19.                 }else if(e.index==1){
      20. 
  
  
  
  
    20.                     prompt.showToast({
      21. 
  
  
  
  
    21.                         message:"您點(diǎn)擊了取消"
      22. 
  
  
  
  
    22.                     });
      23. 
  
  
  
  
    23.                 }
      24. 
  
  
  
  
    24.             }
      25. 
  
  
  
  
    25.         });
      26. 
  
  
  
  
    26.     }
      27. 
  
  
  
  
    27. }
      28.

     效果圖：

    ?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任。

    想了解更多內(nèi)容，請?jiān)L問：

    和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)

    https://harmonyos./#zz


    本文題目：鴻蒙JS開發(fā)6鴻蒙的提示框、對話框和提示菜單的應(yīng)用
    網(wǎng)站地址：http://www.dlmjj.cn/article/dpisegp.html