组件/基础组件

EScrollbar 滚动条

import EUI 1.0

示例与代码

滚动定位与边缘渐隐

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EScrollbar { id: webBasicScroll mask: true height: 160 always: true width: Math.min(560, parent.width) Column { spacing: 8 width: webBasicScroll.availableWidth Repeater { model: 12 ECard { padding: 12 width: parent.width header: "Item " + (index + 1) } } } } Row { spacing: 8 EButton { text: qsTr("滚动到底部") onClicked: webBasicScroll.setScrollTop(10000) } EButton { text: qsTr("回到顶部") onClicked: webBasicScroll.setScrollTop(0) } } }

效果

运行代码，体验组件交互

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

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

滚动条

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScrollbar { height: 160 Column { Repeater { model: 20 EText { text: index } } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

alwaysbool

始终显示滚动条。

默认值false

bottomReachedbool

当前滚动区域是否已到达对应边缘，由滚动事件更新。

默认值false

componentReadybool

滚动组件初始化完成的状态。

默认值false

distancereal

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

默认值0

enabledbool

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

默认值true

heightreal

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

默认值implicitHeight

leftReachedbool

当前滚动区域是否已到达对应边缘，由滚动事件更新。

默认值false

maskvar

是否显示遮罩；滚动条还支持边缘渐隐遮罩配置。

默认值false

maskSizereal

滚动区域边缘渐隐遮罩尺寸，单位为像素。

默认值40

maxHeightreal

最大显示高度，单位为像素；0 表示不额外限制。

默认值0

minSizereal

滚动条滑块最小长度，单位为像素。

默认值36

rightReachedbool

当前滚动区域是否已到达对应边缘，由滚动事件更新。

默认值false

topReachedbool

当前滚动区域是否已到达对应边缘，由滚动事件更新。

默认值false

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

scrollLeftreal只读

当前水平或垂直滚动位置，单位为像素。

默认值由运行时计算

scrollTargetvar只读

滚动条实际控制的 Flickable 对象。

默认值由运行时计算

scrollTopreal只读

当前水平或垂直滚动位置，单位为像素。

默认值由运行时计算

信号

签名作用

endReached(string direction)

滚动至边缘时触发，direction 指明到达的方向。

scrolled(real scrollTop, real scrollLeft)

滚动位置变化时触发，scrollTop 和 scrollLeft 为纵向、横向滚动位置。

方法

签名作用

update()

重新计算滚动范围和滚动条尺寸，适用于内容尺寸变化后。

setScrollTop(top)

设置纵向滚动位置 top，单位为像素。

setScrollLeft(left)

设置横向滚动位置 left，单位为像素。

scrollTo(left, top)

滚动到指定位置；参数为横向和纵向位置，或组件支持的滚动配置。