控制页面体积最佳实践|飞书低代码平台 - 飞书官网

控制页面体积最佳实践|飞书低代码平台

飞书

搭建场景​
  1. 页面由顶部导航、侧导航等多个导航组成。​
  1. 顶部导航、侧导航等内部又由多个 tab 组件组成。​
  1. 页面内含有较多弹层,或者较多复杂的详情页。​
搭建建议​
  1. 顶部导航、侧导航内容部分可使用「内联页」搭建​
可缓解网站首页加载体积,提高网站首屏加载速度​
  1. 如果 tab 组件内容非常多,可使用「内联页」搭建​
可缓解网站首页加载体积,提高网站首屏加载速度,或者可缓解切换 tab 时的内容加载时间。​
搭建实践​
导航 + 内联页​
  1. 先搭建一个主框架​
  • 使用顶部导航和侧导航组件​
帮助文档请查看:导航类组件​
​
250px|700px|reset
image.png
​
​
  1. 主框架绑定内联页,每个导航内容部分都拖入内联页组件,绑定对应的页面​
​
250px|700px|reset
image.png
​
​
详情+内联页​
  1. 以「内联页1-1-首页」里面的数据表格组件为主框架,新建一个点击行详情页作为内联页​
​
250px|700px|reset
image.png
​
​
  1. 在「内联页1-1-首页」,侧拉窗里面绑定内联页组件​
​
250px|700px|reset
image.png
​
​
共性问题​
Q:内联页如何接收参数?​
  1. 内联页新增页面变量,该页面变量用来接收主框架传递进来的参数​
  • 「是否支持上游页面传入」 :必须选择「支持」​
  • 以下搭建步骤以「接收表格当前点击行数据」为例​
​
250px|700px|reset
image.png
​
​
  1. 记录详情组件绑定上页面变量的数据即可​
​
250px|700px|reset
image.png
​
​
Q:主框架如何传参?​
  1. 打开内联页组件的入参属性,传递需要的数据​
  • 内联页必须先有个页面变量来接收​
  • 以下 搭建步骤 以「传递表格当前点击行数据」为例​
​
250px|700px|reset
image.png
​
​
搭建效果​
  1. 导航 + 内联页​
​
250px|700px|reset
​
​
  1. Tab + 内联页​
​
250px|700px|reset
​
​
  1. 详情 + 内联页​
​
250px|700px|reset
​
​
​
​
​
预约飞书企业效能顾问 深度诊断企业痛点,定制专属 AI 办公方案

字节跳动旗下 AI 工作平台

关联文章推荐

优质内容,精华实践

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题

字节跳动旗下 AI 工作平台

联系我们立即试用