鴻蒙提示框，對話框，路由跳轉頁面，跑馬燈，幻燈片及list組件的應用

作者：noutsider 2021-01-29 09:48:17

開發

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com/#zz

[[379043]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

幻燈片控件:<image-animator></image-animator>

跑馬燈控件: <marquee></marquee>

彈出提示框:prompt.showToast()

彈出對話框:prompt.showDialog()

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

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

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

主頁面的js業務邏輯層:

import prompt from '@system.prompt'; 
import router from '@system.router';  //路由  通過路由跳轉頁面 
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 == "養心殿") 
            { 
                router.push({                    //路由的方法 
                    uri: 'pages/jumptwo/jumptwo' 
                }); 
            } 
            else if(name == "乾清宮") 
            { 
                router.push({                     //路由的方法 
                    uri: 'pages/jumpthree/jumpthree' 
                }); 
            } 
        } 
 
}

主頁面視圖層:

<div class="container"> 
   <div class="topview"> 
       <!--幻燈片組件--> 
       <image-animator class="image-animator" duration="5s" fixedsize="false" images="{{imgdatas}}"> 
       </image-animator> 
   </div> 
    <div class="contentview"> 
        <button onclick="showmenu">菜單</button> 
    </div> 
    <menu id="menueone" onselected="changemenu"> 
        <option value="太和殿">太和殿</option> 
        <option value="養心殿">養心殿</option> 
        <option value="乾清宮">乾清宮</option> 
    </menu> 
</div>

主頁面css屬性設置:

.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; 
}

跳轉頁面一的js業務邏輯層:

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:"你點擊了否按鈕" 
                       }) 
                   } 
            } 
        }) 
    } 
}

跳轉頁面一的視圖層:

<div class="container"> 
       <button onclick="changmes">太和殿</button> 
</div>

跳轉頁面二的視圖層:

<div class="container"> 
  <marquee> 
      最是一年春好處,絕勝煙柳滿皇都 
  </marquee> 
</div>

跳轉頁面三的js業務邏輯層:

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":"宮廷文創","icon":"/common/gongwenhua.png"},{"fname":"宮廷建筑","icon":"/common/gu.png"}]}, 
                   {"cname":"故宮文創","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' 
         }) 
    } 
}

跳轉頁面三的視圖層:

<div class="container"> 
    <list class="listview"> 
        <block for="{{listdatas}}"> 
            <list-item-group class="group">      <!--高度不需要給出 會自適應大小--> 
                <list-item class="listitem"> 
                    <image class="img1" src="{{$item.cimg}}"></image> 
                    <text class="txt1">{{$item.cname}}</text> 
                </list-item> 
                <block for="{{(cindx,cvalue) in $item.lname}}"> 
                    <list-item class="listitem1" onclick="changemenu"> 
                        <image class="img1" src="{{cvalue.icon}}"></image> 
                        <text class="txt2">{{cvalue.fname}}</text> 
                    </list-item> 
                </block> 
            </list-item-group> 
        </block> 
    </list> 
</div>

跳轉頁面三的css屬性設置:

.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開發從0到1) https://harmonyos.51cto.com/column/35

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

責任編輯：jianghua 來源：鴻蒙社區

鴻蒙 HarmonyOS 應用開發