轻松搞定vue3滚动进度条：分分钟搞定进度条封装

前端

2023-08-06 08:29:57

在 Vue.js 3 中封装滚动进度条

简介

进度条在用户界面中扮演着至关重要的角色，它们提供了一种直观的方式来表示滚动、加载和进度。在本文中，我们将逐步指导您如何在 Vue.js 3 中封装一个滚动进度条，让您轻松地将它集成到您的项目中。

实现

1. 定义进度条的宽度

进度条的宽度由页面总的可滚动高度和已滚动高度之间的比率决定。

2. 计算页面总的可滚动高度

const totalScrollHeight = document.documentElement.scrollHeight;

3. 计算已滚动高度

const scrolledHeight = document.documentElement.scrollTop;

4. 计算进度条宽度

const progressBarWidth = (scrolledHeight / totalScrollHeight) * 100;

5. 添加进度条到 Vue.js 项目

将以下代码添加到您的 Vue.js 组件中：

<template>
  <div id="progress-bar" :style="{ width: progressBarWidth + '%' }"></div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const progressBarWidth = ref(0);

    onMounted(() => {
      window.addEventListener('scroll', () => {
        const totalScrollHeight = document.documentElement.scrollHeight;
        const scrolledHeight = document.documentElement.scrollTop;
        progressBarWidth.value = (scrolledHeight / totalScrollHeight) * 100;
      });
    });

    return {
      progressBarWidth,
    };
  },
};
</script>