一看就会，超有用活字格技能：一百九十五、选项卡'异步加载'，大幅提升页面加载速度

收藏

本帖最后由 Joe.xu 于 2024-2-4 19:16 编辑

本期的主角是选项卡，说到它大家应该不陌生，当需要展示多个子页面的时候，
选项卡可是越用越爽

image.png690806274.png

但是，当选项卡中子页面不断增多的时候，头疼的问题就来了，页面加载越来越慢了

这是因为选项卡中的多个页面是同步加载的，页面会等选项卡中的子页面全部加载完成再开始渲染
这样自然感觉页面太慢了
活字格9.0带来了一个解决办法，选项卡支持懒加载，不了解选项卡的可以看一下这个教程贴
【新提醒】活字格9.0新功能解密：三、性能提升 - 运行时性能问题（一） - 活字格专区 - 专题教程 - 葡萄城开发者社区 (grapecity.com.cn)

懒加载确实解决了一部分问题，但当我们需要获取每一个选项卡的数据做后续的逻辑处理时，
比如要在服务端命令中，获取每一个选项卡的表格数据，完成后续的逻辑，同时勾选了懒加载
可能就会有下图的报错
image.png125773924.png

原因就是懒加载开启后，只会主动加载选项卡默认的子页面，如果没有人为去点击其他子页面，其他的子页面不会主动加载，
进而服务端命令就取不到其他子页面的数据了
image.png725731811.png

一次偶然的远程，看到了一个机智客户的做法，非常巧妙实现了选项卡的异步加载

工程中三个选项卡子表的数据分别为9W,16W,34W，未开启分页和按需加载,展示全部数据
正常加载需要9.82S
image.png827940368.png

"异步加载"只需1.18S
image.png296171874.png

实现思路如下
1.给出了默认加载的子页面都做一个容器页面，容器页面使用页面容器组件并命令
image.png936191406.png

2.做一个空白页面，并让上面所以的容器页面都先默认展示这个空白页面
image.png451584472.png

3.选项卡除了默认展示的子页面之外，其他都绑定成对应子页面的容器页面，
因为最开始容器页面是空页面的，所以展示的时候就非常快了
image.png173781432.png

4.在默认展示的子页面上写一个公式放在文本框中，获取这个表格的行数。
image.png649717406.png

5.给这个文本框设置命令，用设置单元格属性，给下一个子页面页面容器设置要加载的面。
这样当第一个子页面加载完，就会触发加载第二个。同时也要给第二个子页面做同样的设置，让其触发加载第三个
再有第四个选项卡的话，同理
image.png545756530.png

有这种需求的，赶快尝试一下吧

选项卡异步加载.fgcc (9.62 MB, 下载次数: 59)

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：一百九十五、选项卡'异步加载'，大幅提升页面加载速度

0 个回复

活字格认证

活字格高级认证

微信认证勋章

讲师达人

悬赏达人

圣诞拼拼乐