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

lsfzzf
发布于 2021-1-26 00:17
浏览
0收藏

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

幻灯片组件:<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文件中定义的数据:

鸿蒙js开发6 鸿蒙的提示框、对话框和提示菜单的应用-鸿蒙开发者社区

效果图(图片是可以自动播放的):鸿蒙js开发6 鸿蒙的提示框、对话框和提示菜单的应用-鸿蒙开发者社区

跑马灯组件:<marquee>

<div class="container">
    <marquee>金牛辞旧岁,万里贺新春。让快乐与你同行,让健康与你相伴,将美好与团圆满满托付于你</marquee>
</div>

效果图:

鸿蒙js开发6 鸿蒙的提示框、对话框和提示菜单的应用-鸿蒙开发者社区

 

鸿蒙的弹出菜单、提示框、页面跳转的应用

视图和样式:

<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'
            });
        }
    }
}

效果图(点击按钮弹出菜单后点击对应菜单触发跳转页面的事件):

鸿蒙js开发6 鸿蒙的提示框、对话框和提示菜单的应用-鸿蒙开发者社区鸿蒙的对话框

视图和样式:

<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:"您点击了取消"
                    });
                }
            }
        });
    }
}

效果图:

鸿蒙js开发6 鸿蒙的提示框、对话框和提示菜单的应用-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-1-27 15:41:40修改
3
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
六合李欣
六合李欣

写得每一步都很细致,认真学习了

回复
2021-1-27 20:29:57
回复
    相关推荐