Angular之下拉加载功能实现，

import { Component, OnInit, HostListener } from '@angular/core';
import { MethodsService } from "src/app/services/methods.service";
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { DropDowmService } from '../../../../services/drop-dowm.service';
import { ToastService } from 'src/app/toast.service';
/**
 *@state 食堂发布 档口下菜品详情页面
 */
@Component({
  selector: 'app-cuisine-details',
  templateUrl: './cuisine-details.component.html',
  styleUrls: ['./cuisine-details.component.scss']
})

export class CuisineDetailsComponent implements OnInit {

  //定义变量
  hallId = '';
  diningHall = [];
  isLoadingEnd = false;
  page = 0;

  constructor(
    public apiMethod: MethodsService,
    protected router: Router,
    protected activatedRoute: ActivatedRoute,
    public dropDowmService: DropDowmService,//封装的下拉加载服务
    public toast: ToastService,//弹框
  ) { }

  ngOnInit() {
    //接收页面跳转传递过来的值
    this.activatedRoute.queryParams.subscribe(res => {
      this.hallId = res['hallId'];
    });
    this.queryDiningHall()
  }

  //根据传过来的档口id展示所有菜品信息
  queryDiningHall() {
    this.apiMethod.get('/api/stalls/products?id=' + this.hallId + '&page=' + this.page+ '&size=' + 4, { observe: 'response' }).subscribe(res => {
      for (let i = 0; i < res['body']['length']; i++) {
        this.diningHall.push(res['body'][i]);
      }
      //当api头中的数据次数等价于 循环次数  停止调取api 
      if (Number(res['headers'].get('X-Total-Count')) === this.diningHall.length) {
        this.isLoadingEnd = true;
      }
    }, error => {
      if (error.error.status === 401) {
        this.router.navigate(['./wx-code', { replaceUrl: true }]);
      }
    })
  }


  //滑动加载[下拉翻页]
  @HostListener('window:scroll', ['$event'])
  onWindowScroll(event) {
    const isEnd = this.dropDowmService.calculation();
    if (isEnd && !this.isLoadingEnd) {
      this.toast.load('加载中', 300);
      this.page = this.page + 1;
      //再次查询数据
      this.queryDiningHall();
    }
  }



}

 说明：以上需注意的就是避免陷入死循环，

重复调取api，/* if (Number(res['headers'].get('X-Total-Count')) === this.diningHall.length) { */  判断获取请求头中数据数，与api循环次数等价，即不再调取，显示提示语句：--没有更多内容--

 

 

import {HostListener, Injectable} from '@angular/core';
import {ToastService} from '../toast.service';

@Injectable({
  providedIn: 'root'
})
export class DropDowmService {

  constructor() { }

  //1. 获取滚动条当前位置
  getScrollTop(): number {
    let scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
      scrollTop = document.body.scrollTop;
    }
    return scrollTop;
  }

  //2. 获取当前可视范围高度
  getClientHeight(): number {
    let clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
      clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return  clientHeight;
  }

// 获取文档完整的高度 = 1+2
  getScrollHeight(): number {
    return  Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
  }

  calculation () {
    console.log(this.getScrollTop())
    console.log(this.getClientHeight())
    console.log(this.getScrollHeight())
    if (this.getScrollTop() + this.getClientHeight()
      >= this.getScrollHeight() ) {
      // console.log('触发');
      return true;
    } else {
      // console.log('没触发');
      return false;
    }
  }

}

本类就是将下拉加载核心代码进行封装成服务，

 

<div *ngFor="let dinings of diningHall;">
    <app-title title="档口名：{{dinings.name}}" class="top-sty"></app-title>
  <div class="show-sty">
    <!--*ngIf="inx<3"显示三条-->
    <div *ngFor="let product of dinings.products;let inx=index" class="modul-sty" >
      <img class="img" src="{{product.imgUrl}}" height="80px" />
      <div style="margin-left: 10px;">{{product.name}}</div>
    </div>
    <div *ngIf="isLoadingEnd" class="footer">
      ————没有更多内容了————
    </div>
  </div>
</div>

这就是html页面，以上即是相关下拉加载的全部代码，