文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

OpenHarmony JS UI小型系统自定义控件—toast提示

2024-12-02 04:17

关注

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

一、目标

使用OpenHarmony 小型系统支持的基础控件实现类似toast提示组件,在指定时间toast组件消失隐藏。

二、背景

在OpenHarmony 标准系统上有系统提示@system.prompt,在标准系统中prompt可以设置相应的参数实现提示的显示内容和时长,代码如下:

import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: '提示信息',
duration: 3000,
});
},
}

目前在小型系统上没有@system.prompt能力,目前的需求是在L1设备上实现类似于prompt信息提示的功能,我们先称其为toast。

三、环境

四、效果

1、视频效果

效果视频请移步:​​toast视频​​。

2、效果截图

五、实现思路

从效果图中我们可以看出,toast信息提示视图可以有以下几个特点:

  1. 可以单行或多行(目前支持两行,可以自行修改多行)显示提示信息。
  2. 显示超出限制范围后使用"…"进行截取。
  3. 根据需求可以在指定时间内自动消失提示视图。
  4. 快速切换不同提示内容时,显示最后一次触发的提示信息。
  5. 提示视图在界面靠近底部的位置显示。
  6. 提示信息的文本为白色,背景为半透明的黑色。

分析:小型系统所支持的基础容器中。

  1. 提示信息显示在最上层,可以通过stack堆叠容器,将需要显示的内容使用div容器封装,最后加入stack容器中。
  2. 使用定时器:setTimeout,到达指定时间后设置提示视图隐藏。
  3. 提示的内容使用text实现;4、圆角半透明的背景可以通过设置text的背景颜色和样式border-radius的角度值实现。
  4. 在定时器执行完成时建议清除定时器:clearTimeout(this.timer)。

六、完整代码

说明:组件的代码包括三个部分:hml、css、js,因为代码比较简单,所以没有写注释。


<stack class="container">
<image src="/common/images/toast_bg.jpg" class="main-img"></image>
<div class="main">
<input class="btn" type="button" value="3秒Toast" onclick="onToast3"></input>
<input class="btn" type="button" value="3秒超出单行信息Toast" onclick="onMoreToast3"></input>
<input class="btn" type="button" value="5秒Toast" onclick="onToast5"></input>
<input class="btn" type="button" value="3秒两行信息Toast" onclick="onMultiLine"></input>
<input class="btn" type="button" value="3秒超出两行信息Toast" onclick="onMoreMultiLine"></input>
</div>
<div class="toast" show="{{isOnlyLine}}">
<text class="title">
{{message}}
</text>
</div>
<div class="toast2" show="{{isMultiLine}}">
<text class="title2">
{{message}}
</text>
</div>
<image src="/common/images/back.png" class="back-img" onclick="onBack"></image>
</stack>


.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.main-img{
width: 100%;
height:100%;
}
.back-img {
width: 40px;
height: 40px;
border-radius: 20px;
left: 20px;
top: 20px;
}
.btn {
width: 80%;
height: 80px;
background-color: #28496e;
font-size: 22px;
color: white;
margin: 10px;
}
.toast {
width: 100%;
height: 20%;
top: 75%;
justify-content: center;
align-items: center;
}
.toast2 {
width: 100%;
height: 20%;
top: 75%;
justify-content: center;
align-items: center;
}
.title {
font-size: 18px;
text-align: center;
width: 80%;
height: 70px;
background-color: #99000000;
border-radius: 50px;
color: white;
padding: 20px;
text-overflow: ellipsis;
}
.title2 {
font-size: 18px;
text-align: center;
width: 80%;
height: 110px;
background-color: #99000000;
border-radius: 50px;
color: white;
padding: 20px;
text-overflow: ellipsis;
}
// toastView.js
import router from '@system.router';
var SHOW_LINE = {
ONE_LINE: 1,
MULTI_LINE: 2
}
export default {
data: {
title: 'World',
isOnlyLine: false,
isMultiLine: false,
message: '',
timer: null
},
onToast3(){
this.reset();
this.showToast(SHOW_LINE.ONE_LINE, "显示单行提示信息,3秒后消失", 3000);
},
onMoreToast3(){
this.reset();
this.showToast(SHOW_LINE.ONE_LINE, "当你的业务需要显示单行提示信息,如果超过一行的信息,超出的内容使用点来替换,3秒后消失", 3000);
},
onToast5() {
this.reset();
this.showToast(SHOW_LINE.ONE_LINE, "显示单行提示信息,5秒后消失", 5000);
},
onMultiLine() {
this.reset();
this.showToast(SHOW_LINE.MULTI_LINE, "当你的业务需要显示的提示显示超过一行,可以使用我来显示,目前只支持两行显示,3秒后消失", 3000);
},
onMoreMultiLine() {
this.reset();
this.showToast(SHOW_LINE.MULTI_LINE, "当你的业务需要显示的提示显示超过一行,可以使用我来显示,目前只支持两行显示,如果提示的信息超过了两行,则超出的部分信息使用点来替换,3秒后消失", 3000);
},
showToast(line, msg, duration) {
var that = this;
if (line === SHOW_LINE.ONE_LINE) {
// 当行显示
this.isOnlyLine = true;
} else {
// 多行显示
this.isMultiLine = true;
}
this.message = msg;
//启动定时器
this.timer = setTimeout(() => {
if (line === SHOW_LINE.ONE_LINE) {
// 当行显示
that.isOnlyLine = false;
} else {
// 多行显示
that.isMultiLine = false;
}
clearTimeout(that.timer);
}, duration);
},
reset() {
this.isOnlyLine = false;
this.isMultiLine = false;
if (this.timer) {
clearTimeout(this.timer);
}
},
onBack() {
router.replace({
uri: 'pages/index/index'
});
}
}

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯