简单触底刷新

最新推荐文章于 2024-01-16 17:31:07 发布

曹莓养乐多多

最新推荐文章于 2024-01-16 17:31:07 发布

阅读量297

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52474888/article/details/126517971

版权

// 挂载后添加触底监听
		mounted() {
			window.addEventListener("scroll", this.getbottom);
		},
		created() {
			ListBook(this.page).then(res => {
				// console.log(res.data.result.list);
				this.data = res.data.result.list;
			})
		},
		methods: {
			// 触底请求数据
			getbottom() {
				// 返回滚动条垂直滚动距离
				let scrollTop =
					document.documentElement.scrollTop || document.body.scrollTop;
				// 返回该元素的像素高度，高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条
				let clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				// 返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border）
				let scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;
				let numHeight = scrollTop + clientHeight;
				if (scrollHeight > clientHeight && numHeight > scrollHeight - 1) {
					// console.log('触底了');
					ListBook(this.page++).then(res => {
						// console.log(res.data);
						// this.list = this.list.concat(res.data.data.list);
						this.data =this.data.concat( res.data.result.list);
					})
				}
			},
		},
		// 销毁后移除触底监听
		destroyed() {
			window.removeEventListener("scroll", this.getbottom);
		},