<ul class="test-scroll" (scroll)="divScroll();">
<li *ngFor="let item of tableList">
xxxxxxxx
</li>
<li><span>滚动加载更多...</span></li>
</ul>
css:
ul{
overflow-y: auto;
max-height: 300px; /*测试使用300的h*/
overflow-x: hidden;
}
js:
divScroll() {
var wholeHeight = this.ele.nativeElement.querySelector('.test-scroll').scrollHeight;
var scrollTop = this.ele.nativeElement.querySelector('.test-scroll').scrollTop;
var divHeight = this.ele.nativeElement.querySelector('.test-scroll').clientHeight;
if (scrollTop + divHeight >= wholeHeight) {
console.log('滚动到底部了!'); //这里写动态加载的逻辑,比如Ajax请求后端返回下一个页面的内容
this.scrollSearch();
}
if (scrollTop == 0) {
// alert('滚动到头部了!');
}
}
// 调用ajax,在list里面push数据(一直追加)
scrollSearch(){
}