鸿蒙JS开发6 鸿蒙的提示框、对话框和提示菜单的应用

[[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