vue loadmore 组件滑动加载更多源码解析

以下是“vue loadmore 组件滑动加载更多源码解析”的完整攻略。

1. 前言

在现代 Web 开发中，无限滚动加载更多已经成为了非常普遍的功能需求。Vue 是一款非常流行的前端框架，它提供了丰富的组件机制，使得开发者能够非常方便地实现无限滚动加载更多功能。

本篇攻略主要介绍一个基于 Vue 的 Loadmore 组件，该组件可以在滑动页面时自动触发加载更多的功能。

2. 功能需求

我们需要实现一个无限滚动加载功能，当页面滑动到底部时，自动触发加载更多功能。

3. 源码解析

3.1 HTML 代码

我们首先来看一下该组件的简单 HTML 代码，它主要包含一个列表区域和一个加载更多的按钮区域。

<template>
  <div>
    <div class="list">
      <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    </div>
    <div v-if="hasMore" class="loadmore" ref="loadmore">
      <button class="btn" :disabled="isLoading" @click="loadMore">
        {{ isLoading ? 'Loading...' : 'Load More' }}
      </button>
    </div>
  </div>
</template>

其中，list 是我们要展示的数据列表，hasMore 表示是否还有更多数据需要加载，isLoading 表示当前是否正在加载数据。当 hasMore 为 true 的时候，显示加载更多按钮，否则隐藏。

3.2 JavaScript 代码

再来看一下组件的 JavaScript 代码，它主要包含两个部分：事件监听和加载更多。

3.2.1 事件监听

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      isLoading: false, // 是否正在加载数据
      hasMore: true, // 是否还有更多数据需要加载
      page: 1, // 当前加载的页数
    };
  },
  mounted() {
    // 监听窗口滚动事件
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 取消窗口滚动事件监听
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      // 如果不处于加载中并且还有更多数据可以加载
      if (!this.isLoading && this.hasMore) {
        // 获取按钮相对于窗口的位置信息
        const { top } = this.$refs.loadmore.getBoundingClientRect();
        // 获取窗口的可见高度
        const windowHeight =
          window.innerHeight || document.documentElement.clientHeight;
        // 如果按钮进入窗口的可见范围
        if (top <= windowHeight) {
          // 加载更多数据
          this.loadMore();
        }
      }
    },
    loadMore() {
      // 如果当前正在加载数据，不进行重复加载
      if (this.isLoading) {
        return;
      }
      // 开始加载数据，将 isLoading 设为 true
      this.isLoading = true;
      // 使用异步请求加载数据，在此处省略异步加载代码
      fetchData(this.page).then((data) => {
        // 如果获取到了数据
        if (data && data.length > 0) {
          // 将数据添加到列表中
          this.list = [...this.list, ...data];
          // 加载完成，将 isLoading 设为 false
          this.isLoading = false;
          // 单页数据量固定为 10
          this.hasMore = data.length === 10;
          // 下一次加载的页码加一
          this.page += 1;
        } else {
          // 如果数据已经全部加载完，hasMore 设为 false
          this.hasMore = false;
          // 加载完成，将 isLoading 设为 false
          this.isLoading = false;
        }
      });
    },
  },
};
</script>

在 mounted() 阶段，我们通过 window.addEventListener('scroll', this.handleScroll) 监听页面滚动事件，当页面滚动时会自动调用 handleScroll() 方法。

在 handleScroll() 方法中，我们首先判断当前是否正在加载中且是否存在更多数据需要加载，如果都满足，则判断加载更多按钮是否出现在窗口可见区域内，如果是，则主动触发加载更多操作。

在 loadMore() 方法中，我们首先判断当前是否正在加载数据，如果是，不进行重复加载。然后使用异步请求加载数据，加载完成后将数据添加到列表中，并更新 isLoading、hasMore 和 page 等状态值。

3.2.2 加载数据异步请求示例

在此处给出异步请求示例，以 Axios 为例。

import axios from 'axios';

function fetchData(page) {
  return axios
    .get(`/api/data?page=${page}`)
    .then((response) => {
      if (response.status === 200) {
        return response.data;
      }
      return null;
    })
    .catch((error) => {
      console.error(error);
      return null;
    });
}

4. 示例演示

以下是 Loadmore 组件的两个示例：

4.1 静态数据演示

静态数据演示使用的是 Mock 数据，直接从一个 JSON 文件中加载数据。这个示例中的数据为四条 Mock 数据，总共两页数据。点击 Load More 按钮可以加载下一页的数据。

代码演示：https://codesandbox.io/s/vue-loadmore-demo-1-3qnp4

4.2 动态数据演示

动态数据演示使用的是 Axios 进行异步请求，在代码示例中使用了在线 Mock 数据服务 Easy Mock。这个示例中的数据为 20 条 Mock 数据，总共两页数据。滑动页面即可自动加载下一页的数据。

代码演示：https://codesandbox.io/s/vue-loadmore-demo-2-5bmwc

5. 结语

本篇攻略主要是介绍一个基于 Vue 的 Loadmore 组件的实现方法。该组件可以自动触发滑动加载更多功能，非常适合用于列表页的无限滚动加载。