[[379017]]

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

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

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

本文主要描述對(duì)鴻蒙幻燈片組件、跑馬燈組件、提示框、提示菜單、頁(yè)面跳轉(zhuǎn)以及對(duì)話框的應(yīng)用

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

 業(yè)務(wù)邏輯層通過(guò)fetch請(qǐng)求向nginx反向代理服務(wù)請(qǐng)求所需數(shù)據(jù)

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

 images0.json文件中定義的數(shù)據(jù)：

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

跑馬燈組件：<marquee>

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

鴻蒙的彈出菜單、提示框、頁(yè)面跳轉(zhuǎn)的應(yīng)用

視圖和樣式：

<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">我是個(gè)點(diǎn)擊按鈕</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: { 
    }, 
 
    //點(diǎn)擊按鈕觸發(fā) 彈出顯示菜單 事件 
    clickbutton(){ 
        //顯示id為 menuid 的菜單，此菜單出現(xiàn)位置默認(rèn)為屏幕左上角原點(diǎn)，可通過(guò)在show()中添加坐標(biāo)來(lái)改變 
        //this.$element("menuid").show(); 
 
        this.$element("menuid").show({ 
            x:100, 
            y:550 
        }); 
 
    }, 
    //選中彈出菜單中的項(xiàng)觸發(fā)事件 
    selectmenu(e){ 
        let path = e.value; 
        //鴻蒙的提示框 
        prompt.showToast({ 
            message:path 
        }); 
 
        if(path=="aaa"){ 
            //鴻蒙提供的頁(yè)面跳轉(zhuǎn) 
            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' 
            }); 
        } 
    } 
} 

 效果圖(點(diǎn)擊按鈕彈出菜單后點(diǎn)擊對(duì)應(yīng)菜單觸發(fā)跳轉(zhuǎn)頁(yè)面的事件)：

鴻蒙的對(duì)話框

視圖和樣式：

<div class="container"> 
    <button onclick="onclick">我是另一個(gè)點(diǎn)擊按鈕</button> 
</div> 

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

 效果圖：

 

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

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

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

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