在一个web页面中，数据的获取通常是通过接口进行获取，然而在某些特殊情况下，数据的加载可能因为环境或者其他因素的影响，导致数据加载缓慢。通常为了给用户更好的体验，减少用户的误解，需要在页面合适的位置上加上loading效果。那么，在zCloud低代码的界面可视化中，咱们如何实现loading效果呢？接下来，我将在本文带你通过zCloud低代码的界面可视化在按钮上实现loading效果。
一、效果目标
- 页面进入时，按钮A不展示loading效果
- 用户点击按钮A，请求数据，并展示loading效果
- 请求结束，loading效果关闭
二、效果实现必要条件
- 存在按钮组件
- 存在API
- 按钮具备交互事件，点击按钮可发起请求
- 按钮组件绑定请求状态
三、效果实现步骤
3.1 创建数据源API
- 打开「zCloud开发者中心」，通过「自定义功能」创建一个自定义功能草稿
- 配置自定义功能草稿的基本内容，且包含「界面可视化」
- 进入界面可视化编辑页面，在页面左侧的「数据源」面板中，创建一个API，并命名为test
3.2 拖入按钮组件，并配置交互事件
- 在页面左侧的「组件库」中将“按钮”拖入到右侧的编辑器中
- 点击“按钮”，并在右侧的「属性」面板中，点击「事件」配置“点击”事件
- 点击“点击”事件的“+”添加事件具体执行动作
- 打开“动作弹窗”，选择“发起请求”动作，并选择对应的API为3.1中创建的API变量test，并点击“确定”完成动作配置
3.3 组件绑定请求状态
- 在编辑器中点击“按钮”组件，并在右侧的属性面板中点击「属性」，找到“显示加载状态”
- 点击右侧的“{/}”符号打开绑定表达式弹窗
- 展开绑定表达式弹窗中的「全局数据」中的test，并点击loading即可，表达式右侧的输入框即会展示绑定的值路径
- 点击“确定”即完成绑定
3.4 预览效果
点击编辑器上方的“页面调试”，在该页面中，点击按钮，即可看到按钮跟随请求的状态自动显示loading效果
【PS】如果API请求很快，则效果不明显，可适当的招一个响应不是很快的接口进行测试
3.5 操作视频
四、结语
使用zCloud低代码的界面可视化开发页面时，需要系统的思考，如何利用现有的组件搭建出具备良好体验的页面。低代码开发和传统代码开发的思维不一样，请记得合理的总结、梳理即将要实现的内容，等脑海中已经有一定的初稿了，再在编辑器中进行开发，这样会让你的页面开发效率更快哦！只有多摸索，才能拥有更多的应变！
如果按照以上步骤操作，您还是未能实现，可以关注我、咨询我哦。
【欢迎关注我，了解更多的操作技巧】
最后修改时间：2024-04-07 10:30:05
「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容，转载时必须标注文章的来源（墨天轮），文章链接，文章作者等基本信息，否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容，欢迎发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
