快捷導(dǎo)航

Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng)效果

更新時(shí)間：2023年12月18日 16:38:33 作者：世界還贊頌沉默嗎

這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng),實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來(lái)的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧

背景：

實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來(lái)的數(shù)據(jù)里面，這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去，如此循環(huán)。

<div id="dataContainer"></div>
<div id="loadingContainer"></div>

傳統(tǒng)angular實(shí)現(xiàn)是使用ngAfterViewInit()生命周期，寫在指令（Directive）里面，并且傳出一個(gè)事件，觸發(fā)時(shí)回調(diào)被監(jiān)控組件里面的具體函數(shù)。

不過(guò)對(duì)于異步操作，元素可能在ngAfterViewInit被調(diào)用時(shí)還沒(méi)有完成初始化而導(dǎo)致bug，所以用ngAfterViewChecked() 會(huì)更穩(wěn)，當(dāng)然也更會(huì)導(dǎo)致性能問(wèn)題，每次變更檢測(cè)它都被調(diào)用，這可能會(huì)增加應(yīng)用程序的負(fù)載。

所以這里使用h5 提供的新API ——交叉觀察器 API（Intersection Observer API）提供了一種異步檢測(cè)目標(biāo)元素與祖先元素或頂級(jí)文檔的視口相交情況變化的方法。

效果如圖，為了截到loading，我在增加數(shù)據(jù)的函數(shù)里面加了個(gè)等待。

上代碼

watch-to-view.directive.ts

import { Directive, Output,EventEmitter, ElementRef } from '@angular/core';
@Directive({
  selector: '[appWatchToView]'
})
export class WatchToViewDirective {
  private observer:IntersectionObserver;
  @Output() appWatchToView = new EventEmitter<IntersectionObserverEntry>();
  constructor(public el:ElementRef) {
    this.observer = new IntersectionObserver(this.callback,{rootMargin:'100px',threshold:1,root:null});
    this.observer.observe(el.nativeElement);
   }
  public callback = (entries: IntersectionObserverEntry[]) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if (entry.isIntersecting) {
        this.appWatchToView.emit(entry);
      }
    })
  }
}

app.component.html

<div id="dataContainer">
    <ul>
        <li class="blueBox" *ngFor="let i of data">{{i}}</li>
    </ul>
</div>
<div id="loadingContainer" class="blueBox" appWatchToView (appWatchToView)="this.loadObserver($event)">Loading more...</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Herors';
  batch:Number = 10;
  len:Number = this.batch;
  data:Array<Number>=new Array(this.batch).fill(0).map((_,i)=>i);
  loadObserver = async function (event){
    console.log(event.target);
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.data.push(...new Array(this.batch).fill(0).map((_,i)=>i+this.len));
    this.len+=this.batch;
  }
}

再給個(gè)樣式吧

  .blueBox{
    display: block;
    width: 100%;
    height: 100px;
    background-color: #38b1ee;
    margin-top: 5px;
    text-align: center;
    color: white;
    font-size: large;
  }

官方link: https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

到此這篇關(guān)于Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng)的文章就介紹到這了,更多相關(guān)Angular無(wú)限滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: