回到顶部(Back to Top)

这实际上是一个指令而不是一个组件。 它允许在某个滚动偏移量后显示任何DOM元素（如按钮）。 点击/轻击时，它们将用户带到页面的顶部。

安装

Edit /quasar.conf.js:

framework: {
  directives: ['BackToTop']
}

基础用法

<!-- 基础例子 -->
<q-btn
  v-back-to-top
  round
  color="teal-5"
  class="fixed-bottom-right"
  style="margin: 0 15px 15px 0"
>
  <q-icon name="keyboard_arrow_up" />
</q-btn>

<!--
  通过动画，自定义滚动偏移（在这个偏移量之后按钮可见）
  和动画持续时间。

  按钮/元素变得可见的过程使用“animate-*”CSS类来实现动画效果。 
  在此例中，我们将使用“animate-pop”：
-->
<q-btn
  v-back-to-top.animate="{offset: 500, duration: 200}"
  round
  color="primary"
  class="fixed-bottom-right animate-pop"
  style="margin: 0 15px 15px 0"
>
  <q-icon name="keyboard_arrow_up" />
</q-btn>

当使用布局时，您可以利用页面粘滞组件，并用它包裹您的元素， 就像这样：

<q-page-sticky position="top-right" :offset="[18, 18]">
  <q-btn
    v-back-to-top
    round
    color="primary"
    @click="alert"
    icon="keyboard_arrow_up"
  />
</q-page-sticky>

Vue修饰符

Vue修饰符 说明
animate 添加滚动动画

Vue绑定值

您可以使用3种形式的绑定值：

  1. 无值。 默认的。
  2. 数字形式。 这将是滚动偏移量，之后DOM元素将变为可见。
  3. 有偏移量和/或持续时间作为属性的对象形式。 如果未使用“animate”修饰符，则持续时间将被忽略。

滚动容器确定

请阅读这里，了解Quasar如何确定将滚动事件附加到容器。

滚动触发 滚动实用程序