概述：
vue 中经常会出现下拉至底部自动加载数据功能，给页面添加滚动事件，根据底部图标的位置进行判断
优点：尽量减少请求的数据，使数据加载的更快，方便用户的使用
缺点：浪费宽带，因数据过大使加载过程太慢
什么是节流：
因下方代码需要使用节流，所以在这里介绍一下节流功能：
节流本质上是优化高频率执行代码的手段。浏览器上的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低应用性能，为了优化体验，需要对这类事件进行调用次数的限制，就可以采用节流throttle的方式来减少调用频率。
节流是在一段时间内只运行一次，若在一段时间内重复触发，只有一次生效。节流可以通过使用setTimeout实现，目的是，降低回调执行频率，节省计算资源。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能；函数节流一段时间内只执行一次。
- 下载节流 npm 包
npm install throttle-debounce
- 引入节流
import { throttle } from "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; }); }, }, };
代码功能展示：
下拉加载数据
总结：
以上就是 vue 中实现下拉至底部自动加载数据功能，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
