Chrome开发者工具里展开Observable对象,从其operator能观察到施加在该Observable对象上的操作:

Map操作:(event) => this.getBreakpoint(event.target.innerWidth)

source.operator: DistinctUntilChangedOperator

这个this.breakpointService.breakpoint$的赋值位置:果然有map和distinctUntilChanged,通过pipe链接:

link:https://sap.github.io/spartacus-docs/above-the-fold/#page-fold-configuration

The page fold is configurable for each page template and breakpoint.

page fold针对每个page template和breakpoint进行配置。

The page fold configuration is only an indication to speed up the initial creation of page slots that are above the fold.

You designate the page fold by assigning a page slot to the pageFold parameter.

将pageSlot赋值给pageFold.

This page slot, and all previous, sibling page slots, are “above the fold”.

位于pageFold属性指定的slot以及其之前的兄弟page slot,称之为above the fold.

These page slots are prioritized ahead of page slots that are “below the fold”.

All page slots are eventually rendered if they happen to be above the fold.

The page fold indicates the last page slot that should be rendered above the fold.

Page fold代表应该以above the fold方式渲染的page slots中的最后一个。

If you need a configuration for specific breakpoints, you can configure the page fold for every breakpoint, as shown in the following example:

The page slots adjust their height automatically when components are loaded.

Page slot的高度是自适应的。

Given that content can be added at runtime, it is not possible to implement a (hard-coded) minimum height for page slots or components – it all depends on what the business will add at runtime.

不可能为page slot或者Component设置一个默认的最小高度。

To make it possible to defer the loading of below-the-fold content, Spartacus marks page slots that are below the page fold while page slots above the fold are being loaded. All page slots are marked with an is-pending class as long as all the inner components are not loaded.

当above the fold的page slot被加载时,below the fold中的slots被打上标记:如果其inner Components尚未被加载,则使用is-pending class来标注。

Additionally, the page fold slot has a page-fold class. With these two classes, Spartacus can apply various CSS rules to control deferred loading of below-the-fold content.

更多Jerry的原创文章,尽在:“汪子熙”:

SAP Spartacus pagefold学习笔记相关推荐

  1. SAP Spartacus directive学习笔记

    directive: 目的是给DOM元素添加自定义行为,可以和Component class一样,实现life cycle hooks: css selector: 在template中唯一标识一个D ...

  2. SAP SuccessFactors EC学习笔记(二)解码员工数据对象

    (首发于公众号JohnnyHCM) 作为一名年轻顾问,想赢得客户的信任并不是一件简单的事,尤其是我写的笔记还出现在百度搜索结果的第一个. 距离第一篇笔记,已经经历了SuccessFactors的7次大 ...

  3. SAP Analytics Cloud学习笔记(一):从CSV文件导入数据到Analytics Cloud里创建模型和Story

    从SAP官网下载一个供学习使用的csv文件: https://help.sap.com/http.svc/download?deliverable_id=20229442 拖拽到SAP Analyti ...

  4. SAP Fiori Elements 学习笔记 - 2021年4月19日

    SAP Fiori Elements List Report 里 Smart Table 模板的设计原理: sap.suite.ui.generic.template.fragments.TableC ...

  5. 一个初学者的SAP Cloud Platform学习笔记

    User p1942400002trial i042416trial Host hanatrial.ondemand.com 工作日志 2017-05-01 956我为什么没办法publish 到cl ...

  6. 一些SAP UI5的学习笔记

    写于2016-05-12. (1) 最重要的是学会:在console里看到一些log,如何找到具体是哪一行JS打印的这些log的方法.在jQuery.sap.log.info里设置断点肯定不行,因为会 ...

  7. SAP BW/4HANA学习笔记2

    2.Data Modeling BW/4HANA Data Modeling简介 Data Quality:数据质量问题: silos(桶仓):大量重复冗余的主数据,独立计算统计: 数据silos缺点 ...

  8. SAP Spartacus Page Layout学习笔记

    文档地址: https://sap.github.io/spartacus-docs/page-layout/#outlet-position Spartacus is based on a sing ...

  9. 《SAP高级应用开发》---Idoc学习笔记

    黄佳<SAP高级应用开发>,第四章Idoc技术学习笔记,记录如 一,Idoc:Intermediate document,系统间数据交换过程的媒介          A: 面向消息(mes ...

最新文章

  1. 秒杀应用的MySQL数据库优化
  2. 【正一专栏】从中超走向世界领先的保利尼奥
  3. Python的sort()
  4. java 打印一棵树_java编程题之从上往下打印出二叉树
  5. Redis删除副本节点
  6. 玩转oracle 11g(41):rman备份-00554或者04005
  7. Win11将沿用Win10升级模式 并会有LTSC版本
  8. 练习:写一个脚本,完成以下任务
  9. Unique Binary Search Trees ll -深度优先遍历DFS
  10. MTOM以及在WCF中的应用
  11. 网易开源云原生日志系统!
  12. 企业机房升温-谁之过?
  13. Java不适合于作为主要编程教学语言 -- 孟岩
  14. python多图合并成一张图_python合并PDF文件、图片(先转化为A4纸大小PDF)
  15. 设置自动清理mysql binlog日志_自动清理MySQL binlog日志
  16. win10中使用VS2017\VS2019编译MQTT(包含32位、64位;Debug版本\Release版本)(附示例demo)
  17. Windows中如何修改Intel网卡的注册表使Wireshark可以抓取802.1q tag包
  18. ELF文件格式的详解
  19. 汽车电子系统网络安全指南与汽车信息物理融合系统网络安全指南
  20. php类与对象听不明白,PHP类与对象使用---技巧总结

热门文章

  1. UncaughtExceptionHandler
  2. C0304 备份最后一天所有修改的文件
  3. PageOffice实现最简单的Java导出Word中的数据
  4. 跨平台---udpclient与udpserver
  5. 太网设计FAQ:以太网MAC和PHY
  6. windows和linux的协议栈驱动
  7. CSS 实现文字、图片垂直对齐(vertical-align)
  8. 三层架构-----实践篇-登录小实例
  9. 从零写一个编译器(十一):代码生成之Java字节码基础
  10. axios 跨域代理