UI5：检查控件当前是否已呈现并可见 [英] UI5: Check if a control is currently rendered and visible
问题描述
在SAPUI5应用程序中，我仅在当前对用户可见的情况下才想更新控件（例如，图块）的内容。
我创建了这样的函数：
In a SAPUI5 application I would like to update the content of a control (e. g. a tile) only when this is currently visible to the user. I created a function like this:
updatePage: function() {
for (var i = 0; i < this.myTiles.length; i++) {
if (this.myTiles[i].updater) {
this.myTiles[i].updater();
}
}
setTimeout(this.updatePage.bind(this), 10000);
},
..其中，更新程序是自定义函数，我将其添加到图块中负责更新其内容。
.. where the updater is a custom function I added to the tiles that is in charge to update their content.
问题是：我想检查用户当前是否可以看到图块（即不在页面或页面中）选项卡，当前未选中，但是先前已渲染。）
是否可以使用对象属性来实现此目的？我需要手动管理它吗？
The problem is: I want to check if the tile is currently visible to the user (i. e. is not in a page or in a tab that is not currently selected, but was rendered previously).
Is there a way to achieve this using object properties? Do I need to manage it manually?
推荐答案
网络API IntersectionObserver 现在受包括Safari在内的所有主要浏览器的支持。 src
The web API IntersectionObserver is now supported by all major browsers, including Safari.src
const observer = new IntersectionObserver(callback/*, settings?*/);
observer.observe(domElement);
Demo
下面是一个演示UI5。运行该代码段，然后尝试在此处滚动。页面标题根据目标元素的可见性而更改：
Demo
Below is a demo with UI5. Run the snippet and try to scroll there. The page title is changed depending on the visibility of the target element:
sap.ui.require([
"sap/ui/core/Core",
], Core => Core.attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => {
"use strict";
XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App>
<Page title="Tile visible: {= %{/ratio} > 0}">
<FlexBox renderType="Bare"
height="360vh"
justifyContent="Center"
alignItems="Center"
>
<core:Icon id="myBox"
src="sap-icon://color-fill"
size="5rem"
color="Critical"
/>
</FlexBox>
</Page>
</App>
</mvc:View>`,
afterInit: function() {
this.byId("myBox").addEventDelegate({
onAfterRendering: onAfterRenderingBox.bind(this),
});
},
models: new JSONModel(),
}).then(view => view.placeAt("content"));
function onAfterRenderingBox() {
const domRef = this.byId("myBox").getDomRef();
new IntersectionObserver(myCallback.bind(this)).observe(domRef);
}
function myCallback(entries) {
const entry = getTarget(entries, this.byId("myBox").getDomRef());
this.getModel().setProperty("/ratio", entry.intersectionRatio, null, true);
}
function getTarget(entries, source) {
return entries.find(entry => entry.target === source);
}
})));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatVersion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
如果 IntersectionObserver 仍未得到完全支持目标浏览器（例如IE11），您可以在项目中添加以下polyfill：
In case the IntersectionObserver is still not fully supported by the target browser (e.g. IE11), you can add the following polyfill to your project:
https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js
polyfill检查API是否已经本地支持特德。如果不支持，则所需的对象和方法将连续添加到全局对象中。 polyfilled API的签名等同于本机API。
The polyfill checks whether the API is already natively supported beforehand. If it's not supported, the needed objects and methods will be added to the global object consecutively. The signature of the polyfilled API is equivalent to the native API.
这篇关于UI5：检查控件当前是否已呈现并可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
