鴻蒙的提示框、對話框和提示菜單的應用

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

幻燈片組件：<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'
            });
        }
    }
}

效果圖（點擊按鈕彈出菜單後點擊對應菜單觸發跳轉頁面的事件）：

文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/2963#bkwz

想了解更多關於鴻蒙的內容，請訪問：

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

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