滚动到底部加载更多

<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(){ 

}

猜你喜欢

转载自blog.csdn.net/weixin_42995876/article/details/86315528