日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
鴻蒙提示框，對(duì)話框，路由跳轉(zhuǎn)頁(yè)面，跑馬燈，幻燈片及l(fā)ist組件的應(yīng)用

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

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

https://harmonyos./#zz

幻燈片控件:

跑馬燈控件:

彈出提示框:prompt.showToast()

彈出對(duì)話框:prompt.showDialog()

在制作提示框的時(shí)候,首先制作一個(gè)菜單欄選項(xiàng),彈出菜單欄僅有當(dāng)調(diào)試點(diǎn)擊后才觸發(fā)顯示出來(lái) 不占用原有視圖空間.彈出菜單欄的位置默認(rèn)以(0,0)為基準(zhǔn)點(diǎn),為了更好的用戶體驗(yàn),也可以自行設(shè)置彈出位置(如下圖)

介紹一種跳轉(zhuǎn)頁(yè)面新方法:路由跳轉(zhuǎn)頁(yè)面(具體見(jiàn)代碼): import router from '@system.router'; //通過(guò)路由跳轉(zhuǎn)頁(yè)面

router.push({ uri: 'pages/jumpone/jumpone'}) //路由的方法

主頁(yè)面的js業(yè)務(wù)邏輯層:

 
 
 
 
      
  
  
  
  1. import prompt from '@system.prompt'; 
    2.   
  
  
  
  2. import router from '@system.router';  //路由  通過(guò)路由跳轉(zhuǎn)頁(yè)面 
    3.   
  
  
  
  3. export default { 
    4.   
  
  
  
  4.     data: { 
    5.   
  
  
  
  5.         title: 'World', 
    6.   
  
  
  
  6.         imgdatas:[{ 
    7.   
  
  
  
  7.                       "src":"http://ttjib3.natappfree.cc/images/12.jpeg" 
    8.   
  
  
  
  8.                   }, 
    9.   
  
  
  
  9.                   { 
    10.   
  
  
  
  10.                       "src":"http://ttjib3.natappfree.cc/images/13.jpg" 
    11.   
  
  
  
  11.                   }, 
    12.   
  
  
  
  12.                   { 
    13.   
  
  
  
  13.                      "src":"http://ttjib3.natappfree.cc/images/14.jpg" 
    14.   
  
  
  
  14.                   }, 
    15.   
  
  
  
  15.                    { 
    16.   
  
  
  
  16.                       "src":"http://ttjib3.natappfree.cc/images/15.jpg" 
    17.   
  
  
  
  17.                   }, 
    18.   
  
  
  
  18.                   { 
    19.   
  
  
  
  19.                    "src":"http://ttjib3.natappfree.cc/images/16.png" 
    20.   
  
  
  
  20.                }] 
    21.   
  
  
  
  21.     }, 
    22.   
  
  
  
  22.         showmenu() { 
    23.   
  
  
  
  23.             //彈出顯示菜單    首先要獲取這個(gè)組件用  this.$element 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.             //this.$element("menueone").show(); 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.             //彈出的具體位置 默認(rèn)時(shí)以(0,0)為基準(zhǔn)點(diǎn) 
    28.   
  
  
  
  28.              this.$element("menueone").show({ 
    29.   
  
  
  
  29.                x:0, 
    30.   
  
  
  
  30.                  y:0 
    31.   
  
  
  
  31.            }); 
    32.   
  
  
  
  32.         }, 
    33.   
  
  
  
  33.         changemenu(e) { 
    34.   
  
  
  
  34.             let name = e.value //這里的value就是hml中的value 
    35.   
  
  
  
  35.             //鴻蒙的提示框 
    36.   
  
  
  
  36.             prompt.showToast({ 
    37.   
  
  
  
  37.                 message:name 
    38.   
  
  
  
  38.             }); 
    39.   
  
  
  
  39.             if (name == "太和殿") 
    40.   
  
  
  
  40.             { 
    41.   
  
  
  
  41.                 router.push({                   //路由的方法 
    42.   
  
  
  
  42.                     uri: 'pages/jumpone/jumpone' 
    43.   
  
  
  
  43.                 }); 
    44.   
  
  
  
  44.             } 
    45.   
  
  
  
  45.             else if(name == "養(yǎng)心殿") 
    46.   
  
  
  
  46.             { 
    47.   
  
  
  
  47.                 router.push({                    //路由的方法 
    48.   
  
  
  
  48.                     uri: 'pages/jumptwo/jumptwo' 
    49.   
  
  
  
  49.                 }); 
    50.   
  
  
  
  50.             } 
    51.   
  
  
  
  51.             else if(name == "乾清宮") 
    52.   
  
  
  
  52.             { 
    53.   
  
  
  
  53.                 router.push({                     //路由的方法 
    54.   
  
  
  
  54.                     uri: 'pages/jumpthree/jumpthree' 
    55.   
  
  
  
  55.                 }); 
    56.   
  
  
  
  56.             } 
    57.   
  
  
  
  57.         } 
    58.   
  
  
  
  58.  
    59.   
  
  
  
  59. } 
    60.

主頁(yè)面視圖層:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.     
    3.   
  
  
  
  3.         
    4.   
  
  
  
  4.         
    5.   
  
  
  
  5.         
    6.   
  
  
  
  6.    
 
  •      
  •         菜單 
  •     
    •  
  •      
  •         太和殿 
  •         養(yǎng)心殿 
  •         乾清宮 
  •      
  •  

    主頁(yè)面css屬性設(shè)置:

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.     width:100%; 
      4.   
  
  
  
    4.     height: 1200px; 
      5.   
  
  
  
    5.     display: flex; 
      6.   
  
  
  
    6.     flex-direction: column; 
      7.   
  
  
  
    7.     background-color: skyblue; 
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9. .topview{ 
      10.   
  
  
  
    10.     width: 100%; 
      11.   
  
  
  
    11.     height: 30%; 
      12.   
  
  
  
    12.     border-bottom: 1px solid blue; 
      13.   
  
  
  
    13. } 
      14.   
  
  
  
    14. .image-animator{ 
      15.   
  
  
  
    15.     width: 100%; 
      16.   
  
  
  
    16.     height: 100%; 
      17.   
  
  
  
    17. } 
      18.   
  
  
  
    18. .contentview{ 
      19.   
  
  
  
    19.     width: 100%; 
      20.   
  
  
  
    20.     height: 10%; 
      21.   
  
  
  
    21.     background-color: white; 
      22.   
  
  
  
    22. } 
      23.

    跳轉(zhuǎn)頁(yè)面一的js業(yè)務(wù)邏輯層:

     
 
 
 
        
  
  
  
    1. import prompt from '@system.prompt'; 
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. export default { 
      4.   
  
  
  
    4.     data: { 
      5.   
  
  
  
    5.         title: 'World' 
      6.   
  
  
  
    6.     }, 
      7.   
  
  
  
    7.     changmes() { 
      8.   
  
  
  
    8.         //1.彈出提示框 
      9.   
  
  
  
    9.         // prompt.showToast() 
      10.   
  
  
  
    10.         //2.彈出對(duì)話框 
      11.   
  
  
  
    11.         prompt.showDialog({ 
      12.   
  
  
  
    12.             title:"問(wèn)題", 
      13.   
  
  
  
    13.             message:"你今年是否有600歲?", 
      14.   
  
  
  
    14.             buttons:[{"text":"是","color":"#000000"},{"text":"否","color":"#000000"}], 
      15.   
  
  
  
    15.             //用successs追蹤對(duì)話框 
      16.   
  
  
  
    16.             success:function(data){ 
      17.   
  
  
  
    17.                    if(data.index==0){ 
      18.   
  
  
  
    18.                        prompt.showToast({ 
      19.   
  
  
  
    19.                            message:"你點(diǎn)擊了是按鈕" 
      20.   
  
  
  
    20.                        }) 
      21.   
  
  
  
    21.                    } 
      22.   
  
  
  
    22.                    if(data.index==1){ 
      23.   
  
  
  
    23.                        prompt.showToast({ 
      24.   
  
  
  
    24.                            message:"你點(diǎn)擊了否按鈕" 
      25.   
  
  
  
    25.                        }) 
      26.   
  
  
  
    26.                    } 
      27.   
  
  
  
    27.             } 
      28.   
  
  
  
    28.         }) 
      29.   
  
  
  
    29.     } 
      30.   
  
  
  
    30. } 
      31.

    跳轉(zhuǎn)頁(yè)面一的視圖層:

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.        太和殿 
      3.
     

    跳轉(zhuǎn)頁(yè)面二的視圖層:

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
  
  
  
    3.       最是一年春好處,絕勝煙柳滿皇都 
      4.   
  
  
  
    4.   
      5.  
      5.
     

    跳轉(zhuǎn)頁(yè)面三的js業(yè)務(wù)邏輯層:

     
 
 
 
        
  
  
  
    1. import router from '@system.router'; 
      2.   
  
  
  
    2. export default { 
      3.   
  
  
  
    3.     data: { 
      4.   
  
  
  
    4.         title: 'World', 
      5.   
  
  
  
    5.         listdatas:[{"cname":"故宮典藏","cimg":"/common/gugong.png","lname":[{"fname":"宮廷人物","icon":"/common/renwu.png"},{"fname":"宮廷典制","icon":"/common/gugong.png"},{"fname":"宮廷文創(chuàng)","icon":"/common/gongwenhua.png"},{"fname":"宮廷建筑","icon":"/common/gu.png"}]}, 
      6.   
  
  
  
    6.                    {"cname":"故宮文創(chuàng)","cimg":"/common/gugong.png","lname":[]}, 
      7.   
  
  
  
    7.                    {"cname":"故宮建筑","cimg":"/common/gugong.png","lname":[]}, 
      8.   
  
  
  
    8.                    {"cname":"故宮歷史","cimg":"/common/gugong.png","lname":[]} 
      9.   
  
  
  
    9.         ] 
      10.   
  
  
  
    10.     }, 
      11.   
  
  
  
    11.     changemenu(e){ 
      12.   
  
  
  
    12.          router.push({ 
      13.   
  
  
  
    13.              uri:'pages/gugongwenchuang/gugongwenchuang' 
      14.   
  
  
  
    14.          }) 
      15.   
  
  
  
    15.     } 
      16.   
  
  
  
    16. } 
      17.

     跳轉(zhuǎn)頁(yè)面三的視圖層:

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.      
      3.   
  
  
  
    3.          
      4.   
  
  
  
    4.                    
      5.   
  
  
  
    5.                  
      6.   
  
  
  
    6.                      
      7.   
  
  
  
    7.                     {{$item.cname}} 
      8.   
  
  
  
    8.                  
      9.   
  
  
  
    9.                  
      10.   
  
  
  
    10.                      
      11.   
  
  
  
    11.                          
      12.   
  
  
  
    12.                         {{cvalue.fname}} 
      13.   
  
  
  
    13.                      
      14.   
  
  
  
    14.                  
      15.   
  
  
  
    15.              
      16.   
  
  
  
    16.          
      17.   
  
  
  
    17.      
      18.
     

    跳轉(zhuǎn)頁(yè)面三的css屬性設(shè)置:

     
 
 
 
        
  
  
  
    1. .container { 
      2.   
  
  
  
    2.     width: 100%; 
      3.   
  
  
  
    3.     height: 1200px; 
      4.   
  
  
  
    4.     display: flex; 
      5.   
  
  
  
    5.     flex-direction: column; 
      6.   
  
  
  
    6.     background-color: skyblue; 
      7.   
  
  
  
    7. } 
      8.   
  
  
  
    8. .listview{ 
      9.   
  
  
  
    9.     width: 100%; 
      10.   
  
  
  
    10.     height: 100%; 
      11.   
  
  
  
    11. } 
      12.   
  
  
  
    12. .group{ 
      13.   
  
  
  
    13.     width: 100%; 
      14.   
  
  
  
    14. } 
      15.   
  
  
  
    15. .listitem{ 
      16.   
  
  
  
    16.     width: 100%; 
      17.   
  
  
  
    17.     height: 25%; 
      18.   
  
  
  
    18.     display: flex; 
      19.   
  
  
  
    19.     justify-content:center; 
      20.   
  
  
  
    20.     align-items: center; 
      21.   
  
  
  
    21. } 
      22.   
  
  
  
    22. .img1{ 
      23.   
  
  
  
    23.     width: 80px; 
      24.   
  
  
  
    24.     height: 80px; 
      25.   
  
  
  
    25. } 
      26.   
  
  
  
    26. .txt1{ 
      27.   
  
  
  
    27.     font-size: 45px; 
      28.   
  
  
  
    28.     font-weight: bold; 
      29.   
  
  
  
    29.     font-family: sans-serif; 
      30.   
  
  
  
    30.     margin-left: 70px; 
      31.   
  
  
  
    31. } 
      32.   
  
  
  
    32. .txt2{ 
      33.   
  
  
  
    33.     font-size: 35px; 
      34.   
  
  
  
    34.  
      35.   
  
  
  
    35.     font-family: sans-serif; 
      36.   
  
  
  
    36.     margin-left: 70px; 
      37.   
  
  
  
    37. } 
      38.   
  
  
  
    38. .listitem1{ 
      39.   
  
  
  
    39.     width: 100%; 
      40.   
  
  
  
    40.     height: 18%; 
      41.   
  
  
  
    41.     display: flex; 
      42.   
  
  
  
    42.     justify-content:center; 
      43.   
  
  
  
    43.     align-items: center; 
      44.   
  
  
  
    44. } 
      45.

    效果圖如下,效果視頻已上傳專欄(HarmonyOS開(kāi)發(fā)從0到1) https://harmonyos./column/35

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

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

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

    https://harmonyos./#zz


    當(dāng)前題目：鴻蒙提示框，對(duì)話框，路由跳轉(zhuǎn)頁(yè)面，跑馬燈，幻燈片及l(fā)ist組件的應(yīng)用
    網(wǎng)站地址：http://m.5511xx.com/article/cccsjji.html