[[379017]]

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

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

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

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

幻燈片組件：<image-animator>

視圖及樣式：

<div class="container"> 
    <div class="c1"> 
        <!--幻燈片組件--> 
        <image-animator class="image-animator" duration="10s" fixedsize="false" images="{{imagesDatas}}"> 
        </image-animator> 
    </div> 
</div> 

.container { 
    width: 100%; 
    height: 1500px; 
    display: flex; 
    flex-direction: column; 
} 
.c1{ 
    width: 100%; 
    height: 35%; 
} 
.image-animator{ 
    width: 100%; 
    height: 100%; 
} 

 業務邏輯層通過fetch請求向nginx反向代理服務請求所需數據

import fetch from '@system.fetch'; 
 
export default { 
    data: { 
        imagesDatas:[] 
        
    }, 
 
    onInit(){ 
        fetch.fetch({ 
            //url對應的地址為通過內網穿透工具natapp映射出的nginx反向代理服務的地址 
            url:'http://ibk3v7.natappfree.cc/text/images0.json', 
            responseType:"json", 
            success:(resp)=>{ 
                let datas = JSON.parse(resp.data); 
                this.imagesDatas = datas.imagedatas; 
 
            } 
        }); 
    } 

 images0.json文件中定義的數據：

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

跑馬燈組件：<marquee>

<div class="container"> 
    <marquee>金牛辭舊歲，萬里賀新春。讓快樂與你同行，讓健康與你相伴，將美好與團圓滿滿托付于你</marquee> 
</div> 

鴻蒙的彈出菜單、提示框、頁面跳轉的應用

視圖和樣式：

<div class="container"> 
    <div class="c1"> 
        <!--幻燈片組件--> 
<!--        <image-animator class="image-animator" duration="10s" fixedsize="false" images="{{imagesDatas}}">--> 
<!--        </image-animator>--> 
    </div> 
    <div class="c2"> 
        <button onclick="clickbutton">我是個點擊按鈕</button> 
    </div> 
    <!--彈出菜單--> 
    <menu id="menuid" onselected="selectmenu"> 
        <option value="aaa">aaa</option> 
        <option value="bbb">bbb</option> 
        <option value="ccc">ccc</option> 
    </menu> 
 
</div> 

.container { 
    width: 100%; 
    height: 1500px; 
    display: flex; 
    flex-direction: column; 
} 
.c1{ 
    width: 100%; 
    height: 35%; 
} 
.c2{ 
    width: 100%; 
    height: 8%; 
} 

import prompt from '@system.prompt'; 
import router from '@system.router'; 
export default { 
    data: { 
    }, 
 
    //點擊按鈕觸發 彈出顯示菜單 事件 
    clickbutton(){ 
        //顯示id為 menuid 的菜單，此菜單出現位置默認為屏幕左上角原點，可通過在show()中添加坐標來改變 
        //this.$element("menuid").show(); 
 
        this.$element("menuid").show({ 
            x:100, 
            y:550 
        }); 
 
    }, 
    //選中彈出菜單中的項觸發事件 
    selectmenu(e){ 
        let path = e.value; 
        //鴻蒙的提示框 
        prompt.showToast({ 
            message:path 
        }); 
 
        if(path=="aaa"){ 
            //鴻蒙提供的頁面跳轉 
            router.push({ 
                uri:'pages/aaa/aaa' 
            }); 
 
        }else if(path=="bbb"){ 
            router.push({ 
               uri:'pages/bbb/bbb' 
            }); 
        }else if(path=="ccc"){ 
            router.push({ 
               uri:'pages/ccc/ccc' 
            }); 
        } 
    } 
} 

 效果圖(點擊按鈕彈出菜單后點擊對應菜單觸發跳轉頁面的事件)：

鴻蒙的對話框

視圖和樣式：

<div class="container"> 
    <button onclick="onclick">我是另一個點擊按鈕</button> 
</div> 

import prompt from '@system.prompt'; 
export default { 
    data: { 
 
    }, 
    onclick(){ 
        //鴻蒙的對話框 
        prompt.showDialog({ 
            title:"對話框", 
            message:"確定刪除這條消息么？", 
            buttons:[{"text":"確定","color":"#00E5EE"}, 
                     {"text":"取消","color":"#00E5EE"}], 
            success:function(e){ 
                if(e.index==0){ 
                    //鴻蒙的提示框 
                    prompt.showToast({ 
                        message:"您點擊了確定" 
                    }); 
                }else if(e.index==1){ 
                    prompt.showToast({ 
                        message:"您點擊了取消" 
                    }); 
                } 
            } 
        }); 
    } 
} 

 效果圖：

 

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任。

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

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

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