Vue移动端下拉加载更多数据onload实现方法浅析

在移动端开发中，常常需要实现下拉加载更多数据的功能。这种功能的实现方式有很多种，本文将介绍一种使用onload事件的实现方法。

前置条件

在开始实现之前，需要确保以下条件已经满足：

• 你已经安装并配置好了Vue.js。
• 你已经安装并配置好了vue-router。
• 你已经进行了数据管理和状态管理的设计，并已经能够正常获取数据。

实现步骤

下面是实现下拉加载更多数据的步骤：

步骤1: 在路由组件中监听scroll事件

在你的路由组件中，你需要监听页面的scroll事件。在监听到scroll事件时，你需要触发一个方法，该方法用于判断是否需要加载更多数据。

<template>
  <div class="wrapper" @scroll="scrollHandler">
    <div class="list">
      <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1, // 当前页码
      limit: 10, // 每页数据量
      total: null, // 数据总数
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      // 获取数据的方法
    },

    scrollHandler() {
      const wrapper = this.$el;
      const list = wrapper.querySelector('.list');
      const wrapperHeight = wrapper.offsetHeight;
      const listHeight = list.offsetHeight;
      const distance = listHeight - wrapperHeight - wrapper.scrollTop;

      if (distance <= 20) {
        this.loadMore();
      }
    },

    async loadMore() {
      if (this.list.length >= this.total) {
        return;
      }

      this.page++;

      const data = await this.getList();

      this.list = this.list.concat(data.list);
      this.total = data.total;
    },
  },
};
</script>

在上面的代码中，scrollHandler方法用于判断是否需要加载更多数据。当滚动到列表底部时，调用loadMore方法，该方法会通过getList方法获取新的数据，然后将数据添加到已有列表中。

在loadMore方法中，使用了async/await来异步获取数据。在获取数据后，使用concat方法将新数据与已有列表拼接在一起，将结果保存在list数组中。

步骤2: 使用onload事件加载更多数据

在Vue中监听window.onload事件有一些问题，可以考虑使用wrapper.onload事件监听来解决这个问题。在wrapper.onload事件中，触发loadMore方法来加载更多数据。

<template>
  <div class="wrapper" @scroll="scrollHandler" @load="loadMore">
    <div class="list">
      <div v-for="item in list" :key="item.id">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1, // 当前页码
      limit: 10, // 每页数据量
      total: null, // 数据总数
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      // 获取数据的方法
    },

    scrollHandler() {
      const wrapper = this.$el;
      const list = wrapper.querySelector('.list');
      const wrapperHeight = wrapper.offsetHeight;
      const listHeight = list.offsetHeight;
      const distance = listHeight - wrapperHeight - wrapper.scrollTop;

      if (distance <= 20) {
        this.loadMore();
      }
    },

    async loadMore() {
      if (this.list.length >= this.total) {
        return;
      }

      this.page++;

      const data = await this.getList();

      this.list = this.list.concat(data.list);
      this.total = data.total;
    },
  },
};
</script>

在上面的代码中，我们在wrapper标签上添加了一个load事件，在该事件触发的时候，会执行loadMore方法来加载更多数据。此时，用户在滚动列表到底部之前，window.onload不会被触发，从而解决了使用window.onload监听事件的问题。

示例说明

示例1：实现商品列表页下拉加载更多

假设我们要实现一个商品列表页，该页面需要实现下拉加载更多功能。页面布局如下：

<template>
  <div class="wrapper" @scroll="scrollHandler" @load="loadMore">
    <div class="list">
      <div v-for="item in list" :key="item.id">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1, // 当前页码
      limit: 10, // 每页数据量
      total: null, // 数据总数
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      // 获取数据的方法
    },

    scrollHandler() {
      const wrapper = this.$el;
      const list = wrapper.querySelector('.list');
      const wrapperHeight = wrapper.offsetHeight;
      const listHeight = list.offsetHeight;
      const distance = listHeight - wrapperHeight - wrapper.scrollTop;

      if (distance <= 20) {
        this.loadMore();
      }
    },

    async loadMore() {
      if (this.list.length >= this.total) {
        return;
      }

      this.page++;

      const data = await this.getList();

      this.list = this.list.concat(data.list);
      this.total = data.total;
    },
  },
};
</script>

在上面的代码中，我们首先在template中添加了一个wrapper标签，该标签用于容纳商品列表。然后在这个标签上，我们添加了scroll和load事件的监听，并且定义了scrollHandler和loadMore方法，在滚动到页面底部的时候触发loadMore方法加载更多数据。

在JS部分里，我们添加了三个数据变量：list、page和total，分别表示当前商品列表、页码和商品总数。我们在mounted方法中调用了getList方法，该方法用于初始化列表数据。

在scrollHandler方法中，我们使用了一些计算来判断是否需要加载更多数据。如果滚动距离小于20px，就调用loadMore方法加载更多数据。

在loadMore方法中，我们先判断当前列表长度是否达到了总数据条数（控制总分页），如果是，则直接返回。否则，我们通过getList方法来获取新数据，并使用concat方法将新数据与已有列表拼接在一起，最后更新分页信息。

示例2：实现文章列表页下拉加载更多

我们还可以使用相似的逻辑来实现另一个页面的下拉加载更多功能，比如文章列表页。页面布局如下：

<template>
  <div class="wrapper" @scroll="scrollHandler" @load="loadMore">
    <div class="list">
      <div v-for="item in list" :key="item.id">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1, // 当前页码
      limit: 10, // 每页数据量
      total: null, // 数据总数
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      // 获取数据的方法
    },

    scrollHandler() {
      const wrapper = this.$el;
      const list = wrapper.querySelector('.list');
      const wrapperHeight = wrapper.offsetHeight;
      const listHeight = list.offsetHeight;
      const distance = listHeight - wrapperHeight - wrapper.scrollTop;

      if (distance <= 20) {
        this.loadMore();
      }
    },

    async loadMore() {
      if (this.list.length >= this.total) {
        return;
      }

      this.page++;

      const data = await this.getList();

      this.list = this.list.concat(data.list);
      this.total = data.total;
    },
  },
};
</script>

同理，在上面的代码中我们通过scroll和load事件来监听滚动事件和页面加载事件，并在scrollHandler方法中判断是否需要加载更多数据，在loadMore方法中异步获取数据，并拼接到已有列表数据中。

注意事项

对于滚动优化，还可以使用类似于虚拟列表的技术，只渲染可视区域内的列表项，从而优化渲染效率，避免列表项数量过多导致卡顿。另外，需要注意的是，在加载更多数据时，需要合理地控制分页参数，保证加载数据的正确性。