API 浏览器
布局 QPageScroller

QPageScroller 组件有助于将其封装的 DOM 元素/组件放置在 QPage 内容区域内的静态位置,无论用户滚动到哪里。

¥The QPageScroller component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls.

此方法的一大优势在于,即使布局中的页眉、页脚或抽屉未配置为固定布局,该组件包裹的元素也永远不会与这些元素重叠。在后一种情况下,位置将会偏移,以避免发生重叠。例如,尝试使用非固定页脚。当用户到达屏幕底部并出现页脚时,组件将向上移动,以免与页脚重叠。

¥The great advantage of this is that the elements wrapped by this component will never overlap the layout header, footer or drawer(s), even if those are not configured to be fixed. In the latter case, the position will be offset so that the overlap won’t occur. Try it out with a non-fixed footer for example. When user reaches bottom of screen and footer comes into view, the component will shift up so it won’t overlap with the footer.

本质上,QPageScroller 与 QPageSticky 非常相似。QPageSticky 组件始终可见,而 QPageScroller 组件仅在达到 scroll-offset(属性)后才会显示。一旦可见,用户可以点击它,通过 duration 属性快速返回页面顶部。

¥Essentially QPageScroller is very similar to QPageSticky. Whereas a QPageSticky component is always visible, a QPageScroller component only appears after a scroll-offset (property) is reached. Once visible, the user can click on it to quickly get back to the top of the page via duration property.

Loading QPageScroller API...

用法(Usage)

¥Usage

提示

由于 QPageScroller 需要布局,而 QLayout 默认管理整个窗口,因此出于演示目的,我们将使用容器化的 QLayout。但请记住,你绝对不需要为 QPageScroller 使用容器化的 QLayout。

¥Since QPageScroller needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QPageScroller.

警告

  • 为了使 QPageScroller 正常工作,必须将其放置在 QLayout 组件中。

    ¥In order for QPageScroller to work, it must be placed within a QLayout component.

  • QPageScroller 必须是其父元素中的最后一个子元素,因此它可以显示在其他内容之上。

    ¥QPageScroller must be the last child element within its parent, so it can display on top of other content

基本(Basic)

¥Basic

Basic



已扩展(Expanded)

¥Expanded

Expanded



反向(Reverse)

¥Reverse

Reverse