在Vue.js的钩子函数created里初始化加载数据,在钩子函数mounted中声明一个scroll事件监听,监听屏幕的高度变化,一旦滑动到达屏幕底部就去后台请求新的数据。
// 监听滚动事件
mounted () {
window.addEventListener('scroll', this.handleScroll,true)
},
handleScroll () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; //滚动条的位置
var windowHeitht = document.documentElement.clientHeight; //在页面上返回内容的可视高度
var scrollHeight = document.documentElement.scrollHeight; //返回整个元素的高度(包括带滚动条的隐蔽的地方)
//是否滚动到底部的判断
if(Math.round(scrollTop) + windowHeitht == scrollHeight){
this.index = this.index + 1;//下一页
if(this.index <= this.pages){
this.loadDataList()
}
}
},
获取列表的方法内判断已是最后一页时,显示提示“没有更多了”。
注意容器的css,height:100%;overflow-y:scroll;
网友评论