组件/数据展示引入于 1.3.0

EDeferred 延迟加载

import EUI 1.0

示例与代码

滚动进入视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("向下滚动 ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 EText { padding: 20 text: qsTr("已进入可视区域并加载") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

重复进入视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("向下滚动 ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 once: false EText { padding: 20 text: qsTr("已进入可视区域并加载") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

只执行一次

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("向下滚动 ↓") anchors.centerIn: parent } } EDeferred { y: 240 once: true width: 300 height: 100 EText { padding: 20 text: qsTr("已进入可视区域并加载") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("向下滚动 ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 viewport: viewport EText { padding: 20 text: qsTr("已进入可视区域并加载") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

提前加载

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("向下滚动 ↓") anchors.centerIn: parent } } EDeferred { y: 240 margin: 80 width: 300 height: 100 EText { padding: 20 text: qsTr("已进入可视区域并加载") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

contentalias

进入视口后创建的内容 Component。

默认值loader.sourceComponent

marginreal

进入视口前预加载的额外距离，单位为像素。

默认值0

oncebool

首次加载后保留内容；false 时离开视口卸载。

默认值true

viewportItem

可选视口；同时遵守祖先的裁剪边界。

默认值null

activatedbool

是否已经激活延迟内容。

默认值false

asynchronousbool

使用异步 QML 实例化。

默认值false

placeholderHeightreal

尚未加载内容时占用的高度。

默认值120

itemalias只读

当前已加载的内容实例，未加载时为 null。

默认值loader.item

statusint只读

底层 Loader 状态：Null、Ready、Loading 或 Error。

"" / "success"
"warning" / "exception"

默认值loader.status

inViewportbool只读

当前是否与可见视口相交。

默认值intersectsViewport()

信号

签名作用

exited()

离开可视区域时触发。

loaded()

延迟内容首次加载完成时触发。

entered()

进入可视区域时触发。

方法

签名作用

reset()

恢复组件的初始状态。