遮天,已完本玄幻小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

鴻蒙提示框，對話框，路由跳轉(zhuǎn)頁面，跑馬燈，幻燈片及l(fā)ist組件的應(yīng)用

想了解更多內(nèi)容，請訪問：

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

https://harmonyos./#zz

幻燈片控件:

跑馬燈控件:

彈出提示框:prompt.showToast()

彈出對話框:prompt.showDialog()

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

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

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

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

 
 
 
   
  
  
  import prompt from '@system.prompt';   
  
  
  import router from '@system.router';  //路由  通過路由跳轉(zhuǎn)頁面   
  
  
  export default {   
  
  
      data: {   
  
  
          title: 'World',   
  
  
          imgdatas:[{   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/12.jpeg"   
  
  
                    },   
  
  
                    {   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/13.jpg"   
  
  
                    },   
  
  
                    {   
  
  
                       "src":"http://ttjib3.natappfree.cc/images/14.jpg"   
  
  
                    },   
  
  
                     {   
  
  
                        "src":"http://ttjib3.natappfree.cc/images/15.jpg"   
  
  
                    },   
  
  
                    {   
  
  
                     "src":"http://ttjib3.natappfree.cc/images/16.png"   
  
  
                 }]   
  
  
      },   
  
  
          showmenu() {   
  
  
              //彈出顯示菜單    首先要獲取這個組件用  this.$element   
  
  
     
  
  
              //this.$element("menueone").show();   
  
  
     
  
  
              //彈出的具體位置 默認時以(0,0)為基準點   
  
  
               this.$element("menueone").show({   
  
  
                 x:0,   
  
  
                   y:0   
  
  
             });   
  
  
          },   
  
  
          changemenu(e) {   
  
  
              let name = e.value //這里的value就是hml中的value   
  
  
              //鴻蒙的提示框   
  
  
              prompt.showToast({   
  
  
                  message:name   
  
  
              });   
  
  
              if (name == "太和殿")   
  
  
              {   
  
  
                  router.push({                   //路由的方法   
  
  
                      uri: 'pages/jumpone/jumpone'   
  
  
                  });   
  
  
              }   
  
  
              else if(name == "養(yǎng)心殿")   
  
  
              {   
  
  
                  router.push({                    //路由的方法   
  
  
                      uri: 'pages/jumptwo/jumptwo'   
  
  
                  });   
  
  
              }   
  
  
              else if(name == "乾清宮")   
  
  
              {   
  
  
                  router.push({                     //路由的方法   
  
  
                      uri: 'pages/jumpthree/jumpthree'   
  
  
                  });   
  
  
              }   
  
  
          }   
  
  
     
  
  
  }

主頁面視圖層:

菜單

太和殿

養(yǎng)心殿

乾清宮

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

 
 
 
   
  
  
  .container {   
  
  
     
  
  
      width:100%;   
  
  
      height: 1200px;   
  
  
      display: flex;   
  
  
      flex-direction: column;   
  
  
      background-color: skyblue;   
  
  
  }   
  
  
  .topview{   
  
  
      width: 100%;   
  
  
      height: 30%;   
  
  
      border-bottom: 1px solid blue;   
  
  
  }   
  
  
  .image-animator{   
  
  
      width: 100%;   
  
  
      height: 100%;   
  
  
  }   
  
  
  .contentview{   
  
  
      width: 100%;   
  
  
      height: 10%;   
  
  
      background-color: white;   
  
  
  }

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

 
 
 
   
  
  
  import prompt from '@system.prompt';   
  
  
     
  
  
  export default {   
  
  
      data: {   
  
  
          title: 'World'   
  
  
      },   
  
  
      changmes() {   
  
  
          //1.彈出提示框   
  
  
          // prompt.showToast()   
  
  
          //2.彈出對話框   
  
  
          prompt.showDialog({   
  
  
              title:"問題",   
  
  
              message:"你今年是否有600歲?",   
  
  
              buttons:[{"text":"是","color":"#000000"},{"text":"否","color":"#000000"}],   
  
  
              //用successs追蹤對話框   
  
  
              success:function(data){   
  
  
                     if(data.index==0){   
  
  
                         prompt.showToast({   
  
  
                             message:"你點擊了是按鈕"   
  
  
                         })   
  
  
                     }   
  
  
                     if(data.index==1){   
  
  
                         prompt.showToast({   
  
  
                             message:"你點擊了否按鈕"   
  
  
                         })   
  
  
                     }   
  
  
              }   
  
  
          })   
  
  
      }   
  
  
  }

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

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

 
 
 
   
  
  
     
  
  
       
  
  
        最是一年春好處,絕勝煙柳滿皇都

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

 
 
 
   
  
  
  import router from '@system.router';   
  
  
  export default {   
  
  
      data: {   
  
  
          title: 'World',   
  
  
          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"}]},   
  
  
                     {"cname":"故宮文創(chuàng)","cimg":"/common/gugong.png","lname":[]},   
  
  
                     {"cname":"故宮建筑","cimg":"/common/gugong.png","lname":[]},   
  
  
                     {"cname":"故宮歷史","cimg":"/common/gugong.png","lname":[]}   
  
  
          ]   
  
  
      },   
  
  
      changemenu(e){   
  
  
           router.push({   
  
  
               uri:'pages/gugongwenchuang/gugongwenchuang'   
  
  
           })   
  
  
      }   
  
  
  }

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

 
 
 
   
  
  
     
  
  
         
  
  
             
  
  
                       
  
  
                     
  
  
                         
  
  
                      {{$item.cname}}   
  
  
                     
  
  
                     
  
  
                         
  
  
                             
  
  
                          {{cvalue.fname}}

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

 
 
 
   
  
  
  .container {   
  
  
      width: 100%;   
  
  
      height: 1200px;   
  
  
      display: flex;   
  
  
      flex-direction: column;   
  
  
      background-color: skyblue;   
  
  
  }   
  
  
  .listview{   
  
  
      width: 100%;   
  
  
      height: 100%;   
  
  
  }   
  
  
  .group{   
  
  
      width: 100%;   
  
  
  }   
  
  
  .listitem{   
  
  
      width: 100%;   
  
  
      height: 25%;   
  
  
      display: flex;   
  
  
      justify-content:center;   
  
  
      align-items: center;   
  
  
  }   
  
  
  .img1{   
  
  
      width: 80px;   
  
  
      height: 80px;   
  
  
  }   
  
  
  .txt1{   
  
  
      font-size: 45px;   
  
  
      font-weight: bold;   
  
  
      font-family: sans-serif;   
  
  
      margin-left: 70px;   
  
  
  }   
  
  
  .txt2{   
  
  
      font-size: 35px;   
  
  
     
  
  
      font-family: sans-serif;   
  
  
      margin-left: 70px;   
  
  
  }   
  
  
  .listitem1{   
  
  
      width: 100%;   
  
  
      height: 18%;   
  
  
      display: flex;   
  
  
      justify-content:center;   
  
  
      align-items: center;   
  
  
  }

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

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

想了解更多內(nèi)容，請訪問：

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

https://harmonyos./#zz

當(dāng)前題目：鴻蒙提示框，對話框，路由跳轉(zhuǎn)頁面，跑馬燈，幻燈片及l(fā)ist組件的應(yīng)用
分享URL：http://m.fisionsoft.com.cn/article/cccsjji.html

新聞中心

其他資訊