OpenHarmony JS UI小型系统自定义控件(2)—dialog弹窗 原创 精华

发布于 2022-4-1 15:54
浏览
1收藏

一、目标

使用OpenHarmony 小型系统支持的基础控件实现dialog弹窗容器。

二、背景

在OpenHarmony 标准系统上有dialog容器,在标准系统中dialog是一种自定义弹窗容器,具体效果可以看官方提供的样例。但在小型系统中没有提供dialog自定义弹窗容器,目前的需求是在L1设备上实现类似于dialog弹窗容器的功能。

三、环境

设备:君正x2000开发板
系统:OpenHarmony 3.0.0.0(LTS)

四、效果

4.1视频效果

视频查看效果

4.2效果截图

OpenHarmony JS UI小型系统自定义控件(2)—dialog弹窗-开源基础软件社区
OpenHarmony JS UI小型系统自定义控件(2)—dialog弹窗-开源基础软件社区

五、实现思路

从效果图中我们可以看出,dialog弹窗容器可以有以下几个特点:
1、弹窗屏幕居中显示;
2、弹窗整体布局从上到下包括:图片、标题、描述、按钮;
3、弹窗出现时背景半透明;
4、弹窗显示时,点击事件由弹窗消费不向下传递
5、点击弹窗空白处可以关闭弹窗
分析:小型系统所支持的基础容器中
1、弹窗效果可以通过stack堆叠容器,将内容显示层和弹窗层进行分离,初始状态下通过容器的show=false属性将弹窗的视图隐藏,点击按钮需要显示弹窗时,将修改弹窗容器的show=true弹出提示窗口。
2、弹窗中的控件需要使用到:image、text、input

备注:如果你对上面提到的容器API还不熟悉,可以参看以下内容:

六、完整代码

说明:组件的代码包括三个部分:hml、css、js,因为代码比较简单,所以没有写注释,如果有不明白的地方可以留言。

<!-- dialogView.hml -->
<stack class="stack-content">
    <stack class="main">
        <image class="main_img" src="/common/images/dialog_main_bg.jpg"></image>
        <input class="btn" value="升级" onclick="onClick" type="button"></input>
        <image src="/common/images/back.png" class="back-img" onclick="onBack"></image>
    </stack>
    <div class="dialog" onclick="onClickDialog" show="{{isShow}}">
        <div class="dialog-content" onclick="onDialogContent">
            <image class="img" src="/common/images/dialog1_bg.jpg"></image>
            <text class="game-update-title">游戏升级</text>
            <text class="game-update-hint">超级神射手[请重设社区新游戏参数]版本号:2.05.071 版本,游戏已升级到最新版本,可以快速体验以下吧!</text>
            <input class="join-btn" value="快速加入" onclick="onJoin" type="button"></input>
        </div>
    </div>
</stack>

/*dialogView.css*/
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.stack-content{
    width: 100%;
    height: 100%;
    background-color: orange;
}
.main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.btn{
    width: 50%;
    height: 70px;
    left: 25%;
    top: 60%;
    background-color: #99ec8b36;
}
.dialog{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    font-size: 26fp;
    background-color: #77555555;
}
.dialog-content{
    width: 80%;
    height: 570px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main_img{
    width: 100%;
    height: 100%;
}
.back-img{
    width: 40px;
    height:40px;
    border-radius: 20px;
    left: 20px;
    top: 20px;
}
.img{
    width: 100%;
    height: 300px;
    border-radius: 20px;
}
.game-update-title{
    font-size: 26px;
    text-align: center;
    width: 80%;
    height: 50px;
    color: #2d2d2d;
    margin-top: 20px;
}
.game-update-hint{
    font-size: 16px;
    text-align: center;
    width: 80%;
    height: 80px;
    color: #5d5c5c;
}
.join-btn{
    width: 200px;
    height: 60px;
    background-color: red;
    margin-top: 10px;
}

import router from '@system.router';
export default {
    data: {
        title: 'World',
        isShow: false,
        isClickDialogContent:false
    },
    onBack() {
        router.replace({
            uri: "pages/index/index"
        })
    },
    onClick() {
        console.log("onClick");
        this.isShow = !this.isShow
    },
    onClickDialog() {
        console.log("onClickDialog");
        if (this.isClickDialogContent) {
            this.isClickDialogContent = false;
        } else {
            this.isShow = !this.isShow
        }
    },
    onDialogContent() {
        console.log("onDialogContent");
        this.isClickDialogContent = true;
    },
    onJoin() {
        this.isShow = !this.isShow
    }
}

七、感谢

如果您能看到最后,还希望您能动动手指点个赞,一个人能走多远关键在于与谁同行,我用跨越山海的一路相伴,希望得到您的点赞。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-7 17:25:06修改
4
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐