Vue页面滚动持续更新带分页

data() { return { tab:[], // 存放列表数据 onFetching:false,}}

mounted() { let sw = true //滚动控制开关 document.addEventListener('scroll', this.scrollHandle) //启动监听滚动事件 }

methods: { // 滚动 scrollHandle: function(e) { let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight //document的滚动高度 let nowScotop = document.documentElement.clientHeight || document.body.clientHeight //可视区高度 let wheight = document.documentElement.scrollTop || document.body.scrollTop //已滚动高度 if (this.onFetching) { // do nothing } else { if (scrollHeight - wheight < 1100) { this.onFetching = true setTimeout(() => { this.pages.pageIndex = Number(this.pages.pageIndex)// 转为number类型 this.pages.pageIndex += 1 this.getData() //加载列表的请求方法 this.onFetching = false }, 500) } } }, async getData() { var res = await this.$httpAPI.searchAccoutd(`pageIndex=${this.pages.pageIndex}&pageSize=${this.pages.pageSize}`) if (res.data) { for (let i = 0; i < res.data.content.length; i++) { this.tab.push(res.data.content[i]) } console.log(this.tab) this.sw = true } },}