移动端H5监听 上拉触底 懒加载

本文主要是介绍移动端H5监听 上拉触底 懒加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<div v-if="job.length>3" style="padding:10px 0;color:#888"><div>{{totalCount && totalCount === job.length ? '已无更多':'正在加载中……'}}</div>
</div>

methods: {onScroll() {const docScrollTop = document.documentElement && document.documentElement.scrollTop// console.log(docScrollTop, '高度')const docClientHeight = document.body.clientHeight && document.documentElement.clientHeight// console.log(docClientHeight, '页面高度')const docScrollHeight = document.body.scrollHeight// console.log(docScrollHeight, '文档实际高度')const aaa = docScrollHeight - docScrollTop - docClientHeight// console.log(aaa, '距离底部的高度')if (aaa < 285) {this.jobList()}}
}

注：上面的代码里面的aaa<285是因为还有页面下面的页脚，所以不能是到底再加载，而应该是到页脚位置就开始加载
下面的代码是请求列表接口，仅供参考

jobList () {if ((this.pageNo * this.pageSize) < this.totalCount) {this.pageNo++this.list()}},list () {serve.list(this.value, this.pageNo, 1, this.value2 === null ? '' : this.value2, '', this.pageSize).then(res => {if (res.data.code === 200) {console.log(res)this.job = this.job.concat(res.data.data.rows)this.totalCount = res.data.data.totalCount}})}

这篇关于移动端H5监听 上拉触底 懒加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---