vue 中实现下拉至底部自动加载数据

vue 中经常会出现下拉至底部自动加载数据功能，给页面添加滚动事件，根据底部图标的位置进行判断优点：尽量减少请求的数据，使数据加载的更快，方便用户的使用缺点：浪费宽带，因数据过大使加载过程太慢

清风与我

4132人浏览 · 2022-11-04 10:19:37

清风与我 · 2022-11-04 10:19:37 发布

概述：

vue 中经常会出现下拉至底部自动加载数据功能，给页面添加滚动事件，根据底部图标的位置进行判断
优点：尽量减少请求的数据，使数据加载的更快，方便用户的使用
缺点：浪费宽带，因数据过大使加载过程太慢

什么是节流：

因下方代码需要使用节流，所以在这里介绍一下节流功能：

节流本质上是优化高频率执行代码的手段。浏览器上的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低应用性能，为了优化体验，需要对这类事件进行调用次数的限制，就可以采用节流throttle的方式来减少调用频率。

节流是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。节流可以通过使用setTimeout实现，目的是，降低回调执行频率，节省计算资源。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能；函数节流一段时间内只执行一次。

下载节流 npm 包

npm install throttle-debounce

引入节流

import { throttle } from "throttle-debounce";

节流具体功能看 npm 官方文档：https://www.npmjs.com/package/throttle-debounce

代码：

将窗口的滚动进行监听，划到底部的时候就进行加载，但是页面关闭的同时，记得将这个监听器关闭，节省性能。并且给滚动条监听事件加入节流功能

加载图标页
数据页为父组件，图标页为子组件
this.$refs.waterfall 为加载图标

import { throttle } from "throttle-debounce";
export default {
  name: "Waterfall",
  data() {
    return {
      isLoading: false,
    };
  },
  mounted() {
    // 性能优化：节流，每隔一段固定的时间，再去执行指定的功能
    this.loading = throttle(300, this.scroll.bind(this));
    window.addEventListener("scroll", this.loading);
  },
  destroyed() {
    // 防止组件被解绑之后，监听事件依然存在，需要解绑
    window.removeEventListener("scroll", this.loading);
  },
  methods: {
    scroll() {
      if (this.isLoading) return;
      // getBoundingClientRect()：获取元素的位置
      if (
        this.$refs.waterfall.getBoundingClientRect().bottom >
        document.documentElement.clientHeight
      ) {
        console.log("已到达可视区域");
        this.isLoading = true;
        // 通知外部，滚动已完成，可以显示数据
        this.$emit("view");
      }
    },
  },
};

加载数据页
getMenus() 是自己封装的 ajax 请求
自己改一下请求数据

import { getMenus } from "@/service/api";
export default {
  name: "home",件 
  data() {
    return {
      menuList: [],
      page: 1,
      pages: 0,
    };
  },
  mounted() {
    // 进入页面时请求 内容精选
    getMenus({ page: this.page }).then(({ data }) => {
      // console.log(data);
      this.menuList = data.list;
      // 一共要加载多少次 32
      this.pages = Math.ceil(data.total / data.page_size);
      // console.log(this.pages);
    });
  },
  methods: {
    view() {
      // console.log("在外部监听到的滚动");
      // 当数据全部加载完成后
      if (this.pages < this.page) {
        // console.log("滚动到底部");
        this.$refs.waterfall.isLoading = false;
        // 不在继续请求新的数据
        return;
      }
      // 显示加载的图标
      this.$refs.waterfall.isLoading = true;
      // 页数加一
      this.page++;
      // 下拉至图标处请求 内容精选
      getMenus({ page: this.page }).then(({ data }) => {
        // 追加至 menuList 数组
        this.menuList.push(...data.list);
        // 隐藏加载的图标
        this.$refs.waterfall.isLoading = false;
      });
    },
  },
};