如何实现SAP UI5 Web Component React控件的加载效果

Posted JerryWangSAP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现SAP UI5 Web Component React控件的加载效果相关的知识,希望对你有一定的参考价值。

假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图:

技术图片
技术图片

导入useState函数,默认加载状态为false:

技术图片

每次点击屏幕后,首先将Loading状态使用切换函数setLoading设置成true,这样可以看到控件正在加载的动画效果。2秒钟后,setLoading设置为false,关闭动画效果。

技术图片

下图这道渐进式显示的横线就是控件加载时的动画效果。

技术图片

最后把loading变量赋给两个Chart的loading属性:

技术图片

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
技术图片

以上是关于如何实现SAP UI5 Web Component React控件的加载效果的主要内容,如果未能解决你的问题,请参考以下文章

如何使用SAP UI5 Web Component for React的padding功能

如何使用SAP UI5 web Component的React框架的柱状图和折线图

SAP UI5 web Component里的条件渲染机制

HTML5开发移动web应用——SAP UI5篇

什么是SAP UI5的Component-preload.js

如何在SAP UI5应用里添加使用摄像头拍照的功能