PC端滚到底部加载下一页数据

最新推荐文章于 2024-02-01 09:43:25 发布

专业BUG

最新推荐文章于 2024-02-01 09:43:25 发布

阅读量861

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhiyun_li1/article/details/116044528

本文详细介绍了如何在PC端开发中实现滚动到底部自动加载更多数据的功能。通过监听滚动事件，结合Vue.js的ref属性，判断滚动位置和页面内容高度，使用节流函数防止频繁请求，动态加载下一页数据，并在数据不足时停止加载。同时，确保在组件销毁时移除监听事件，优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在PC端开发的过程中我们经常会遇到，滚动页面底部来获取下一页的数据：
1、在html定义ref（从这里开始计算）

<div class="content" ref="scrollTopList">
.....内容........
</div>

2、在data里生明page=1，isempty: false（自定义用来获取数据时判断是否需要获取下一页）,

// 监听页面滚动
		mounted() {
			this.$refs.scrollTopList.addEventListener("scroll", this.throttle(this.handleScroll, 500), true)
		},

3、在methods里获取滚动的位置

// 获取滚动位置
			handleScroll() {
				let scrollTop = this.$refs.scrollTopList.scrollTop, //变量scrollTop是滚动条滚动时，距离顶部的距
					clientHeight = this.$refs.scrollTopList.clientHeight, //变量windowHeight是可视区的高度
					scrollHeight = this.$refs.scrollTopList.scrollHeight, //变量scrollHeight是滚动条的总高度
					height = 79; //根据项目实际定义
				if (scrollTop + clientHeight >= scrollHeight - height && !this.isempty) {
					this.isempty = true;
					this.page = parseInt(this.page) + parseInt(1);//页数+1
					this.Mycrea(); //调用列表list接口方法
				} else {
					return false
				}
			},
// 节流函数（防止数据一直加载）
			throttle(func, wait) {
				let lastTime = null
				let timeout
				return () => {
					let context = this;
					let now = new Date();
					let arg = arguments;
					if (now - lastTime - wait > 0) {
						if (timeout) {
							clearTimeout(timeout)
							timeout = null
						}
						func.apply(context, arg)
						lastTime = now
					} else if (!timeout) {
						timeout = setTimeout(() => {
							func.apply(context, arg)
						}, wait)
					}
				}
			},

4、最后一步我们获取后台数据列表时做的一些判断

Mycrea() {
				// 列表
				MycreaHttp({
					page: this.page
				}).then((ref) => {
					if (ref.code == 200) {
						this.isempty = false;
						this.Datalist2 = this.Datalist2.concat(ref.data)//合并数组,当请求到下一页数据时保留上页数据。
					//判断每页小于后台规定条数，不加载下一页数据
						if (ref.data.length <= 7) {
							this.isempty = true;
						}
					}
				})
			},

5、在离开页面时，记得销毁要不然会影响项目速度。

// 销毁
		destroyed() {
			window.removeEventListener('scroll', this.throttle(this.handleScroll, 500), true)
		},

这样就可以在Pc端实现滚动底部加载下一页数据了。