Angular中使用Intersection Observer API实现无限滚动

news2024/11/23 23:50:06

背景:
实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面,这时loading就会被新数据顶下去,如此循环。

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

传统angular实现是使用ngAfterViewInit()生命周期,写在指令(Directive)里面,并且传出一个事件,触发时回调被监控组件里面的具体函数。

不过对于异步操作,元素可能在ngAfterViewInit被调用时还没有完成初始化而导致bug,所以用ngAfterViewChecked() 会更稳,当然也更会导致性能问题,每次变更检测它都被调用,这可能会增加应用程序的负载。

所以这里使用h5 提供的新API ——交叉观察器 API(Intersection Observer API)提供了一种异步检测目标元素与祖先元素或顶级文档的视口相交情况变化的方法。

效果如图,为了截到loading,我在增加数据的函数里面加了个等待。
在这里插入图片描述

上代码

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;
  }
}

再给个样式吧

  .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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1316975.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux添加环境变量

一、查看当前环境变量 echo $PATH 二、将工作空间添加到环境变量&#xff0c;vim是编辑器&#xff0c;可以换成别的编辑器&#xff0c;vim编辑器的使用法可以百度一下 vim ~/.bashrc编辑器添加&#xff1a; source ~/scan_ws/devel/setup.bash

【Linux】介绍:进程退出、进程等待、进程程序替换

目录 一、进程退出 _exit函数 exit函数 _exit()与exit比较 return退出 二、进程等待 wait方法 waitpid方法 三、进程程序替换 替换函数 函数解释 命名理解 使用举例 一、进程退出 正常终止&#xff08;可以通过 echo $? 查看进程退出码&#xff09;&#xff1a;1.…

爬虫工作量由小到大的思维转变---<第十一章 Scrapy之sqlalchemy模版和改造(番外)>

前言: 正常的pymysql当然问题不大,但是我个人还是建议:sqlalchemy! 因为他更能让我们把精力放在表单设计上,而不执着于代码本身了. (-----版权所有。未经作者书面同意&#xff0c;不得转载或用于任何商业用途!----) 正文: 先提供一个基础模版: 表图: 创建表的sql: CREA…

【漏洞复现】捷诚管理信息系统 SQL注入漏洞

漏洞描述 捷诚管理信息系统是一款功能全面,可以支持自营、联营到外柜租赁的管理,其自身带工作流管理工具,能够帮助企业有效的开展内部审批工作。 该系统CWSFinanceCommon.asmx接口存在SQL注入漏洞。未经身份认证的攻击者可以通过该漏洞获取数据库敏感信息,深入利用可获取…

JavaScript值类型和引用类型两道经典面试题

JavaScript值类型和引用类型两道经典面试题 题目1题目2 题目1 首先&#xff0c;小试牛刀&#xff0c;请看第一道题。 let a {x: 10 } let b a a.x 20 console.log(b.x)a {x: 30 } console.log(b.x) a.x 40 console.log(b.x);那么上述代码输出结果是多少呢&#xff1f; …

物联网AI 物联网平台学习之概述

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 万物简单IOT是一个集物联网教育、企业SaaS私有化部署的物联网服务平台&#xff0c;它集成了设备管理、数据安全通信、消息订阅、规则引擎等一系列物联网核心能力&#xff0c;支持设备数据上云以及海量设备数…

<VR串流线方案> PICO 4 Pro VR串流线方案 Oculus Quest2 Link串流线方案

虚拟现实技术(英文名称&#xff1a;Virtual Reality&#xff0c;缩写为VR)&#xff0c;又称虚拟实境或灵境技术&#xff0c;是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术&#xff0c;其基本实现方式是以计算机技术为主&#xff0c;利用并…

UE4 Niagara学习笔记

需要在其他发射器的同一个粒子位置发射其他粒子就用Spawn Particles from other Emitter 把发射器名字填上去即可 这里Move to Nearest Distance Field Subface GPU&#xff0c;可以将生成的Niagara附着到最近的物体上 使用场景就是做的火苗附着到物体上

基于 WebSocket 打造聊天室

一、什么是 WebSocket&#xff1f; WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c…

翻译: LLM工具使用和代理Tool use and agents

欢迎来到本周的最后一个视频。在这个视频中&#xff0c;我想与您分享LLM&#xff08;大型语言模型&#xff09;开始能够使用工具的情况&#xff0c;以及讨论一下前沿的“代理”主题&#xff0c;这是让LLM自己决定下一步采取什么行动的领域。让我们来看看。在早期的食物订单接收…

centos7安装node-v18版本

背景# 背景就是上一篇文章提到的&#xff0c;部署gitbook这个文档中心的话&#xff0c;是需要先安装node&#xff0c;然后&#xff0c;如果你的node版本过高的话&#xff0c;一般会报错&#xff0c;此时&#xff0c;网上很多文章就是降node版本解决&#xff0c;但其实用高版本…

【️如何理解面向对象和面向过程】

✅如何理解面向对象和面向过程&#xff1f; 典型理解✅扩展知识仓✅面向对象的三大基本特征✅封装✅继承✅多态 ✅为什么Java不支持多继承&#xff1f;✅菱形继承问题✅Java 8 中的多继承 ✅面向对象的五大基本原则&#xff1f; 典型理解 面向过程把问题分解成一个一个步骤&…

buuctf-Misc 题目解答分解85-87

85.[UTCTF2020]file header 下载完就是一个图片 &#xff0c;但是显示图片错误&#xff0c;提示文件头 没有 用010editor 打开 找一个png 文件&#xff0c;看一下它的头部 只需要修改前四个字节为 89 50 4E 47 即可 就能拿到flag utflag{3lit3_h4ck3r} 86.[WUSTCTF2020]gir…

蓝桥杯专题-真题版含答案-【三角螺旋阵】【干支记年法】【异或加密法】【金字塔】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

v851s ssh搭建与使用

ssh 概述: 1. 用来远程登录的一种安全通道协议(常用于linux 、UNIX中); 2. 分为服务端和客户端: 1)服务端即openSSH ,一般属于目标开发板(linux中配置文件路径/etc/ssh/sshd_config); 2)客户端即登录端,常用工具:sercureCRT 、MobaXterm 、Putty等; 1. ssh 服务…

Webrtc 学习交流

花了几周的时间研究了一下webrtc &#xff0c;并开发了一个小项目&#xff0c;用来点对点私密聊天 交流传输文件等…后续会继续扩展其功能。 体验地址&#xff0c;大狗子的ID,我在线时可以连接测试到我 f3e0d6d0-cfd7-44a4-b333-e82c821cd927 项目特点 除了交换信令与stun 没…

Hadoop分布式配置小白篇(附加各阶段问题解决方式)

看的黑马的课&#xff0c;记录一下配置步骤 目录 1.VMware安装&#xff1a; 方法1&#xff1a; 方法2&#xff1a; 2.创建虚拟机 1.ISO镜像文件获取&#xff08;CentOS&#xff09;&#xff1a; 2.创建&#xff08;简略步骤&#xff09; 3.克隆虚拟机&#xff08;克隆伪…

Flutter在Android Studio上创建项目与构建模式

一、安装插件 1、前提条件&#xff0c;安装配置好Android Studio环境 2、安装Flutter和Dart插件 Linux或者Windows平台&#xff1a; 1&#xff09;、打开File > Settings。 2&#xff09;、在左侧列表中&#xff0c;选择"Plugins"右侧上方面板选中 "Market…

向华为学习:基于BLM模型的战略规划研讨会实操的详细说明,含研讨表单(二)

上一篇文章&#xff0c;华研荟结合自己的经验和实践&#xff0c;详细介绍了基于BLM模型的战略规划研讨会的设计和组织流程&#xff0c;提高效率的做法。有朋友和我私信沟通说&#xff0c;其实这个流程不单单适合于BLM模型的战略规划研讨会&#xff0c;实际上&#xff0c;使用其…

【C++11特性篇】C++11中新增的initializer_list——初始化的小利器(2)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C11系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.探究std::initializer_list是什么…