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

背景:
实现原理为 在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.mzph.cn/news/227762.shtml

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

相关文章

Java之方法引用

目录 一、什么是方法引用 二、方法引用的规则 三、方法引用的分类&#xff1a; &#xff08;一&#xff09;、引用静态方法 &#xff08;二&#xff09;、引用成员方法 1、引用其他类的成员方法 2、引用本类的成员方法 3、引用父类的成员方法 &#xff08;三&#xff…

Win7系统桌面出现白色透明框的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Vue3源码梳理:设计一个微型Vue的源码框架环境

目录结构设计 创建 vue-mini 目录在该目录中&#xff0c;初始化npm包&#xff1a;$ npm init -y创建package.json文件创建packages 目录&#xff0c;作为核心代码区域 在内创建vue目录&#xff1a;打包&#xff0c;测试实例&#xff0c;项目整体入口模块在内创建 shared 目录&…

高云GW1NSR-4C开发板M3核RT-Thread应用

1.仅提供RT-Thread的Nano版本 MCU工程在\EMPU(GW1NS-4C)_V1.2\ref_design\MCU_RefDesign\Keil_RefDesign\rt_thread_nano\PROJECT目录下&#xff0c;FPGA工程参考&#xff1a; 高云GW1NSR-4C开发板M3硬核应用-CSDN博客 特别注意&#xff0c;MCU主频&#xff08;即FPGA工程经P…

C#基础知识 - 变量、常量与数据类型篇

C#基础知识 - 变量、常量与数据类型篇 第3节 变量、常量与数据类型3.1 C#变量3.1.1 变量使用3.1.2 自定义变量3.1.2 接收用户输入 3.2 C#常量3.2.1 常量的使用 3.3 C#数据类型3.3.1 数据类型之值类型3.3.2 数据类型之引用类型 更多C#基础知识详解请查看&#xff1a;C#基础知识 …

Adaptive IBC :异构链互操作性的颠覆者

2024年第一季度&#xff0c;隐私协议 Secret Network 将会使用 Octopus Network 基于 Adaptive IBC 技术路线开发的 NEAR IBC&#xff0c;实现与 NEAR Protocol 之间将会实现首次跨链交互&#xff0c;这同样是 Cosmos 生态与 NEAR 之间的首次连接。整个加密世界正在成为一个越来…

ESP32网络编程实例-WebSocket服务器广播信息

WebSocket服务器广播信息 文章目录 WebSocket服务器广播信息1、软件准备2、硬件准备3、代码实现3.1 服务器代码实现3.2 客户端代码实现在本文中,我们将介绍如何向连接到 ESP32 服务器的所有 WebSocket 客户端广播消息。 1、软件准备 Arduino IDE在前面的文章中,如何搭建ESP32…

elasticsearch查询出现Limit of total fields 1000 has been exceeded

项目场景&#xff1a; 在项目中使用elasticsearch保存日志等相关数据&#xff0c;查询页面查询这些日志数据 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 今天在检查日志数据时&#xff0c;发现数据出不来&#xff0c;检查后端日志&#xff0c;发现一直…

【lesson14】MySQL表的基本查询retrieve(读取)1

文章目录 表的基本操作介绍retrieveselect列建表基本测试 where子句建表基本测试 表的基本操作介绍 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; retrieve select列 建表 基本测试 插入数据 全列查询 …

深度学习记录--矩阵维数

如何识别矩阵的维数 如下图 矩阵的行列数容易在前向和后向传播过程中弄错&#xff0c;故写这篇文章来提醒易错点 顺便起到日后查表改错的作用 本文仅作本人查询参考(摘自吴恩达深度学习笔记)

C++标准模板(STL)- 算法库

算法库提供大量用途的函数&#xff08;例如查找、排序、计数、操作&#xff09;&#xff0c;它们在元素范围上操作。注意范围定义为 [first, last) &#xff0c;其中 last 指代要查询或修改的最后元素的后一个元素。 有制约算法 C20 在命名空间 std::ranges 中提供大多数算法的…

laravel5.5 里面如果想要使用自定义的数据库连接器

由于项目里面使用到了doris&#xff0c;虽然doris支持mysql协议&#xff0c;但是如果直接把他当mysql使用是行不通的&#xff0c;因为doris并不支持mysql的一些option和mode设置&#xff0c;然后就会一直报错&#xff1a; SQLSTATE[HY000]: General error: 2013 Lost connecti…

前端常用去重的几种方式

文章目录 方式1: ES6新语法方式2: 遍历 利用filter方式3: 使用 new Map() for循环方式4: 利用 hasOwnProperty总结 在github 查看该文章 方式1: ES6新语法 过滤出网页中不重复的html标签 结合去重知识点考查 […new Set([…document.querySelectorAll(‘*’)].map(v>v.t…

分布式锁,进程锁,线程锁

线程锁:大家都不陌生&#xff0c;主要用来给方法、代码块加锁。当某个方法或者代码块使用锁时&#xff0c;那么在同一时刻至多仅有有一个线程在执行该段代码。当有多个线程访问同一对象的加锁方法/代码块时&#xff0c;同一时间只有一个线程在执行&#xff0c;其余线程必须要等…

Vue使用Canvas实现电子签名功能示例

当使用Vue来实现电子签名功能时&#xff0c;可以结合Canvas元素和Vue的数据绑定功能来实现。下面是一个简单的示例&#xff0c;演示了如何在Vue中使用Canvas实现电子签名功能&#xff1a; <template><div><!-- Canvas元素用于绘制电子签名 --><canvasref…

bigdecimal比较大小

bigdecimal比较大小 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在日常的Java开发中&#xff0c;我们经常会涉及到对数字进行比较&#xff0c;而BigDecimal作为一种高精度的数值类型&#xff0c;其…

06 使用v-model实现双向数据绑定

概述 Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI. Vue 通过创建一个专用指令来观…

IntelliJ IDEA 自带HTTP Client接口插件上传文件示例

如何使用IntelliJ IDEA自带的HTTP Client接口插件进行文件上传的示例。在这个示例中&#xff0c;我们将关注Controller代码、HTTP请求文件&#xff08;xxx.http&#xff09;&#xff0c;以及文件的上传和处理。 Controller代码 首先&#xff0c;让我们看一下处理文件上传的Co…

第15章 《乐趣》Page305~311, 代码精简以后,讨论一下引用含义的问题

将Page305~311的代码精简了一下&#xff0c;讨论一下引用含义的问题&#xff0c;精简之后的代码如下&#xff1a; #include <iostream> #include <SDL2/SDL.h>using namespace std;namespace sdl2 {char const* last_error() {return SDL_GetError(); }struct Ini…

基于 WebSocket 打造聊天室

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