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

本文主要描述对鸿蒙幻灯片组件、跑马灯组件、提示框、提示菜单、页面跳转以及对话框的应用

幻灯片组件：<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:"您点击了取消"
                    });
                }
            }
        });
    }
}

效果图：