滚动到底部加载更多

最新推荐文章于 2023-08-08 09:17:41 发布

原创最新推荐文章于 2023-08-08 09:17:41 发布 · 728 阅读

1 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

38 篇文章

订阅专栏

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

}