组件/数据展示

EInfiniteScroll 无限滚动

import EUI 1.0

示例与代码

节流加载与手动完成

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInfiniteScroll { id: list delay: 200 height: 200 distance: 24 width: Math.min(480, parent.width) model: [qsTr("记录 1"), qsTr("记录 2"), qsTr("记录 3"), qsTr("记录 4")] onLoadMore: { const rows = model.slice() for (let index = 0; index < 4; ++index) rows.push(qsTr("记录 ") + (rows.length + 1)) model = rows finishLoad(rows.length >= 20) } }

效果

运行代码，体验组件交互

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

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

无限滚动

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInfiniteScroll { property var items: ["Alpha", "Beta", "Gamma", "Delta"] property var nextItems: ["Epsilon", "Zeta", "Eta", "Theta"] height: 240 width: parent.width model: items onLoadMore: { items = items.concat(nextItems) finishLoad(items.length >= 40) } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

delayint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值200

distanceint

距滚动边缘多近时视为到达边界，单位为像素。

默认值48

enabledbool

是否允许交互；false 时控件禁用。

默认值true

finishedbool

是否已经加载全部数据；为 true 时不再请求。

默认值false

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

immediatebool

内容未填满视口时立即请求更多数据。

默认值true

loadingbool

是否处于加载状态。

默认值false

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

nearEndbool只读

滚动位置是否已接近内容末端。

默认值由运行时计算

信号

签名作用

loadMore()

滚动接近底部并需要更多数据时触发；加载结束后调用 finishLoad。

方法

签名作用

finishLoad(done)

结束本次加载；done 为 true 表示没有更多数据。