SAP Spartacus pagefold学习笔记

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学习笔记相关推荐

SAP Spartacus directive学习笔记
directive: 目的是给DOM元素添加自定义行为,可以和Component class一样,实现life cycle hooks: css selector: 在template中唯一标识一个D ...
SAP SuccessFactors EC学习笔记（二）解码员工数据对象
(首发于公众号JohnnyHCM) 作为一名年轻顾问,想赢得客户的信任并不是一件简单的事,尤其是我写的笔记还出现在百度搜索结果的第一个. 距离第一篇笔记,已经经历了SuccessFactors的7次大 ...
SAP Analytics Cloud学习笔记(一)：从CSV文件导入数据到Analytics Cloud里创建模型和Story
从SAP官网下载一个供学习使用的csv文件: https://help.sap.com/http.svc/download?deliverable_id=20229442 拖拽到SAP Analyti ...
SAP Fiori Elements 学习笔记 - 2021年4月19日
SAP Fiori Elements List Report 里 Smart Table 模板的设计原理: sap.suite.ui.generic.template.fragments.TableC ...
一个初学者的SAP Cloud Platform学习笔记
User p1942400002trial i042416trial Host hanatrial.ondemand.com 工作日志 2017-05-01 956我为什么没办法publish 到cl ...
一些SAP UI5的学习笔记
写于2016-05-12. (1) 最重要的是学会:在console里看到一些log,如何找到具体是哪一行JS打印的这些log的方法.在jQuery.sap.log.info里设置断点肯定不行,因为会 ...
SAP BW/4HANA学习笔记2
2.Data Modeling BW/4HANA Data Modeling简介 Data Quality:数据质量问题: silos(桶仓):大量重复冗余的主数据,独立计算统计: 数据silos缺点 ...
SAP Spartacus Page Layout学习笔记
文档地址: https://sap.github.io/spartacus-docs/page-layout/#outlet-position Spartacus is based on a sing ...
《SAP高级应用开发》---Idoc学习笔记
黄佳<SAP高级应用开发>,第四章Idoc技术学习笔记,记录如一,Idoc:Intermediate document,系统间数据交换过程的媒介 A: 面向消息(mes ...

SAP Spartacus pagefold学习笔记

SAP Spartacus pagefold学习笔记相关推荐

最新文章

热门文章