苍穹开发系列之四:卡片异步加载动态效果实现

栏目:云星空知识作者:金蝶来源:金蝶云社区发布:2024-09-16浏览:3

苍穹开发系列之四:卡片异步加载动态效果实现


 

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

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

image.webp

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

二、思路与方案:

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

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

 

三、实现过程:

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

image.webp

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

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

image.webp

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

image.webp

苍穹开发系列之四:卡片异步加载动态效果实现

一、问题描述/需求描述:在苍穹首页界面,可以加入一些统计数据的卡片。在数据量大,请求耗时较长时,点击刷新会出现一个动态加载的页面,...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息