Angular之下拉加载功能实现，

喜欢ヅ旅行 2024-04-19 11:24 27阅读 0赞

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">
        
        <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页面，以上即是相关下拉加载的全部代码，