苍穹开发系列之四:卡片异步加载动态效果实现原创
金蝶云社区-dengqp
dengqp
0人赞赏了该文章 61次浏览 未经作者许可,禁止转载编辑于2022年12月23日 11:28:48


 

一、问题描述/需求描述:

在苍穹首页界面,可以加入一些统计数据的卡片。在数据量大,请求耗时较长时,点击刷新会出现一个动态加载的页面,如下图。

image.png

查看卡片的源代码,会发现实现的逻辑相对复杂,本文提供一种简单的实现方式实现该效果。

二、思路与方案:

卡片继承了动态表单的基类,是动态表单的一种。首先我们需要确定卡片数据异步查询的逻辑的实现方式。在苍穹中一切前后端的交互都是指令,用户操作界面=>前端发送请求=>后端插件处理业务逻辑后返回指令=>前端响应返回的指令,结束该一交互过程。

这里我们使用苍穹提供的addClientCallBack()这个方法实现异步请求数据操作,在数据加载前后,将卡片状态设置为加载中的动态状态。

 

三、实现过程:

1、 界面设计:
> 进入开发平台新增一个卡片,在一个容器面板中,我们添加一个标签控件用来展示数据,一个图片控件用来显示加载中的动态图片(这里我们都显示出来,在插件中统一设置显隐性)

image.png

2、 插件编写:
> 设置动态图片的加载效果:
显示图片,隐藏标签;隐藏图片,显示标签

image.png > 注入异步方法:建议在afterCreateData()中调用
显示加载图片,分模块注入进行异步数据请求

image.png

> 异步请求数据逻辑,查完数据后,隐藏对应模块的加载中图片

image.png

赞 0