在 Vue 中创建一个粘性页脚

Vue 1年前 27

在网页设计中，页脚是页面上重要的组成部分之一。它通常包含有关网站的版权信息、联系方式和其他相关信息。但是，当用户滚动页面时，页脚可能会消失在屏幕上方，这可能会导致用户无法轻松访问页脚信息。因此，创建一个粘性页脚可以确保用户始终能够访问页脚信息，而不必担心其消失。

在本文中，我们将介绍如何在 Vue 中创建一个粘性页脚。

创建基本模板

首先，在 Vue 中创建一个基本模板，包含一个头部、主体和页脚。以下是一个简单的示例：

<template>
  <div id="app">
    <header>
      <!-- 头部内容 -->
    </header>
    <main>
      <!-- 主体内容 -->
    </main>
    <footer>
      <!-- 页脚内容 -->
    </footer>
  </div>
</template>

将页脚固定在底部

为了将页脚固定在底部，我们可以使用 CSS 的 position 属性。将页脚的 position 属性设置为 fixed，并将其 bottom 属性设置为 0，这将使页脚始终停留在页面的底部。

<style>
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
  }
</style>

此时，页脚将粘性地固定在页面底部，但是当页面过长时，页脚可能会遮挡主体内容。

使用 Vue 监听页面高度

为了避免页脚遮挡主体内容，我们需要使用 Vue 监听页面高度。我们可以使用 window.innerHeight 获取当前视口高度，并将其与页面总高度进行比较。如果页面高度小于视口高度，则将页脚固定在底部；否则，将页脚保留在底部以确保其可见。

以下是一个简单的 Vue 监听器示例：

<script>
  export default {
    data() {
      return {
        footerFixed: false
      }
    },
    created() {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
    },
    destroyed() {
      window.removeEventListener('resize', this.handleResize)
    },
    methods: {
      handleResize() {
        this.footerFixed = window.innerHeight > document.body.offsetHeight
      }
    }
  }
</script>

在此示例中，我们使用 window.addEventListener 监听窗口大小的变化，并使用 this.handleResize 方法在创建组件时和销毁组件时调用。handleResize 方法比较视口高度和页面高度，并使用 this.footerFixed 属性将页脚的固定状态设置为 true 或 false。

动态设置页脚样式

最后，我们需要根据页脚的固定状态动态设置页脚的样式。我们可以使用 Vue 的 :class 绑定将不同的样式应用于页脚。

以下是一个简单的示例：

<template>
  <div id="app">
    <header>
      <!-- 头部内容 -->
    </header>
    <main>
      <!-- 主体内容 -->
    </main>
    <footer :class="{ 'fixed': footerFixed }">
      <!-- 页脚内容 -->
    </footer>
  </div>
</template>

<style>
  footer {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #f2f2f2;
  }

  .fixed {
    position: fixed;
    bottom: 0;
  }
</style>