组件/视觉效果

EParallaxView 视差滚动

import EUI 1.0

示例与代码

视差滚动

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EParallaxView { height: 280 speed: 0.35 width: parent.width backgroundComponent: Component { Image { source: "qrc:/example/images/gallery/tree.jpg" fillMode: Image.PreserveAspectCrop ERectangle { color: "#66000000" anchors.fill: parent } } } Repeater { model: 10 EText { height: 48 color: "white" text: index + 1 } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

backgroundComponentalias

自定义视差背景的 Component 插槽；null 使用默认内容。

默认值别名：backgroundLoader.sourceComponent

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值别名：column.data

enabledbool

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

默认值true

flickablealias

提供滚动位置的 Flickable 对象。

默认值别名：flickable

heightreal

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

默认值implicitHeight

speedreal

视差背景相对滚动内容的移动比例。

默认值0.35

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth