布局页眉和页脚

QLayout允许您将视图配置为3x3矩阵，包含可选的页眉和/或页脚。 如果你还没有，请先阅读QLayout文档页面。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QLayoutHeader',
    'QLayoutFooter'
  ]
}

基本用法

<q-layout>
  ...
  <q-layout-header v-model="header">
    <!-- 页眉内容 -->
  </q-layout-header>
  ...
  <q-layout-footer v-model="footer">
    <!-- 页脚内容 -->
  </q-layout-footer>
  ...
</q-layout>

QLayoutHeader / QLayoutFooter Vue属性

Vue属性 类型 说明
reveal 布尔 滚动隐藏页眉/页脚。
reveal-offset 数字 （默认值：250）以像素为单位，触发隐藏的滚动距离。

Reveal属性

您会注意到在使用QLayout view配置时，如果将页眉设置为“hhh”（全部小写字母），则页眉将被设置为页面顶部的静态定位。这意味着，当用户向下滚动页面时，标题将移出屏幕。如果用户需要使用页眉中的导航，他/她必须完全滚动到页面顶部才能看到它，这是不好的用户体验。

一种帮助用户的方法是在页面上添加一个回到顶部按钮。

另一种方法是使用reveal属性。

通过将页眉固定到屏幕的顶部的方式，reveal属性覆盖QLayoutview属性中的“H”。当用户向下滚动超过reveal-offset 像素时，页眉会在屏幕顶部之上滚动自己的高度。只要用户向后滚动（仅1像素），页眉立即再次出现。

QLayoutFooter也一样。

完整地隐藏页眉/页脚

QLayoutHeader和QLayoutFooter支持一个布尔v-model，它决定它们是否占用屏幕上的空间。这不会干扰reveal属性，只有在v-model设置为true时才起作用。

<template>
  ...
  <q-layout-header v-model="state">
    ...
  </q-layout-header>
  ...
</template>

<script>
export default {
  data () {
    return {
      state: true
    }
  },
  methods: {
    toggleHeader () {
      this.state = !this.state
    }
  }
}
</script>

QLayoutHeader / QLayoutFooter Vue事件

Vue事件 说明
@reveal(state) reveal状态变化时触发。

处理Quasar主题

你可以做一些调整来区分Material和iOS主题。 在演示中，您会注意到页眉和页脚基于Quasar主题具有不同的外观。 下面是一个如何在做到这样的例子。 请注意，在这个例子中，我们还在标眉（Material）或页脚（iOS）中放置了导航标签：

<!-- layout.vue -->
<q-layout-header reveal>
  <q-toolbar :inverted="$q.theme === 'ios'">
    ....
  </q-toolbar>

  <nav-tabs v-if="$q.theme === 'mat'" />
</q-layout-header>

<q-layout-footer reveal v-if="$q.theme === 'ios'">
  <nav-tabs />
</q-layout-footer>

<!-- nav-tabs.vue -->
<q-tabs :inverted="$q.theme === 'ios'">
  <q-route-tab......
</q-tabs>
集成布局与路由器 布局侧滑菜单