[[379043]]

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

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

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

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

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

彈出提示框: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ù)邏輯層:

import prompt from '@system.prompt'; 
import router from '@system.router';  //路由  通過(guò)路由跳轉(zhuǎn)頁(yè)面 
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() { 
            //彈出顯示菜單    首先要獲取這個(gè)組件用  this.$element 
 
            //this.$element("menueone").show(); 
 
            //彈出的具體位置 默認(rèn)時(shí)以(0,0)為基準(zhǔn)點(diǎn) 
             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è)面視圖層:

<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="養(yǎng)心殿">養(yǎng)心殿</option> 
        <option value="乾清宮">乾清宮</option> 
    </menu> 
</div> 

主頁(yè)面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)頁(yè)面一的js業(yè)務(wù)邏輯層:

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

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

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

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

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

跳轉(zhuǎn)頁(yè)面三的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)頁(yè)面三的視圖層:

<div class="container"> 
    <list class="listview"> 
        <block for="{{listdatas}}"> 
            <list-item-group class="group">      <!--高度不需要給出 會(huì)自適應(yīng)大小--> 
                <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> 

跳轉(zhuǎn)頁(yè)面三的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開(kāi)發(fā)從0到1) https://harmonyos.51cto.com/column/35

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

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

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

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