页面粘滞(Page Sticky)

PageSticky组件有助于将由它包裹的DOM元素/组件放置到布局内容区域中的静态位置，无论用户在哪里滚动。 一个很好的例子就是一个“回到顶部”按钮，一旦用户在屏幕上向下滚动到某一级别，该按钮将首先出现在屏幕的底部。

这样做的一大优点是，由该组件包裹的元素不会与布局页眉、页脚或左侧/右侧重叠，即使这些元素未配置为固定。 在后一种情况下，该组件位置将被偏移，使得重叠不会发生。
例如，尝试使用非固定页脚。 当用户触及屏幕底部并进入视图时，组件将向上移动，因此它不会与页脚重叠。

重要！
为了使QPageSticky正常工作，它必须放置在QLayout组件中。

注意
QPageSticky必须是其父级中的最后一个子元素，因此它可以显示在其他内容之上

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QPageSticky']
}

基本用法

<q-layout>
  ...
  <!--
    将QPageSticky放置为页面的最后一个子元素。
     这对于它显示在其他页面内容之上非常重要。
  -->
  <q-page-sticky position="top-right" :offset="[18, 18]">
    <q-btn round color="primary" @click="alert" icon="alarm" />
  </q-page-sticky>
</q-layout>

以上将在布局的内容区域的右上角放置一个圆形按钮。 它也会将按钮从布局的顶部和右侧边缘放置18个像素。

展开模式

需要Quasar v0.15.4 +
请注意，您需要手动将相应padding设置到您的QPage元素，以便粘性元素不会与页面内容重叠。

默认情况下，QPageSticky缩小到其内容的大小。 如果你想在定位设置为“top”（适用于top/right/botton/left）的QPageSticky中放置类似QToolbar的东西（可与任何元素/组件一起使用），可以使用expand布尔属性：

<!-- 位于页面顶部的工具栏示例 -->
<q-page-sticky expand position="top">
  <q-toolbar>
    <q-btn flat round dense icon="menu" />
    <q-toolbar-title>Title</q-toolbar-title>
  </q-toolbar>
</q-page-sticky>

<!-- 将某些内容放在页面右侧的示例-->
<q-page-sticky expand position="left">
  <div class="fit bg-tertiary">
    ....content...
  </div>
</q-page-sticky>

提示：对于左/右定位，您可以使用Quasar的Flex CSS类来居中内容。

Vue属性

Vue属性 类型 说明
position 字符串 查看底下内容给的有效值。
expand 布尔 （v0.15.4 +）展开模式。 覆盖默认的“shrinking”模式，其中Page Sticky缩小至内容大小。
offset 数组（2个整数） 可选的。 内容的偏移，相对于角。 首先在X轴上偏移，然后在Y轴上偏移。例如：[0，18]（在X轴上偏移0，在Y轴上偏移18px）。

position属性的有效值： top-right, top-left, bottom-right, bottom-left, top, right, bottom, left。

布局页面 浮动操作按钮