vue移动端页底自动加载

文章目录

流程方法查询方法添加监听

流程

页面加载，查询第一页查询时，设置字段querying=true，表示数据查询中，防止滚动时多次加载查询后，判断是否还有下一页，若是没有直接就结束了还有下一页，判断当前显示的数据是否超出页面显示了（若是显示的数据少了的话，不会滚动，就不会自动加载了），若是显示的少了，多加载几页，知道形成滚动条若是还有下一页，querying=false，表示数据加载完成，可以通过滚动条加载下一页了

方法

查询方法

selectInfo(pageNum) { let _this = this; _this.querying = true; _this.showStateText = '数据加载中'; .... 调用接口.then(function (res) { if (res.success) { //设置页数 _this.page = { currentPage: res.data.current, pagesize: res.data.size, total: res.data.total, pages: res.data.pages } //将list数据拼接到之前的list之后 _this.tableData.push.apply(_this.tableData, res.data.records); _this.showStateText = '加载完成' //页面加载完 _this.$nextTick(() => { if (_this.page.currentPage < _this.page.pages) { let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; if (windowHeight >= scrollHeight) { //没出现滚动条 _this.selectInfo(_this.page.currentPage + 1) } else { // _this.$message.success("继续监听"); _this.querying = false; } } else { // _this.$message.info("无需查询"); _this.showStateText = '到底了' } }) } }).catch(function (error) { console.log(error) ddtoast(JSON.stringify(error)); _this.querying = false; }) }

添加监听

在mounted() 中设置

let _this = this; window.onscroll = function () { //页面加载完 _this.$nextTick(() => { if (!_this.querying && _this.page.currentPage < _this.page.pages) { //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度 var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // _this.$message.info("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight); if ((scrollTop + windowHeight + 100 >= scrollHeight)) { _this.selectInfo(_this.page.currentPage + 1) } } }); }