【new IntersectionObserver】vue3 数据懒加载

new IntersectionObserver js方法描述步骤
实现逻辑:通过监视底部节点可视情况,获取新数据进行渲染,如果获取不到最新数据则显示暂无其他数据

new IntersectionObserver 是用于监视元素可见度,所以我们只需要监视数据下方的dom是否可见

import { type Ref, watchEffect, ref } from "vue"//我用的ts,不需要可以删除
interface IntersectionObserverProps {target: Ref<Element | null | undefined>root?: Ref<any>onIntersect: IntersectionObserverCallbackrootMargin?: stringthreshold?: number | number[]
}export function useIntersectionObserver({ target, root, onIntersect, rootMargin = "0px", threshold = 0.1 }: IntersectionObserverProps) {let cleanup: Function//每次调用前先移除监听const observer: Ref<Nullable<IntersectionObserver>> = ref(null)const stopEffect = watchEffect(() => {cleanup && cleanup()observer.value = new IntersectionObserver(onIntersect, {root: root ? root.value : null,//设置监视器的根节点,不传则默认为视口rootMargin,//类似于 CSS 的 margin 属性。用来缩小或扩大 rootBounds,从而影响相交的触发。threshold/*属性决定相交比例为多少时,触发回调函数。取值为 0 ~ 1,或者 0 ~ 1的数组。当我们把  threshold 设置为 [0, 0.25, 0.5, 0.75, 1],元素分别在 0%,25%,50%,75%,100% 可见时,触发回调函数。*/})const current = target.value//被监视的元素本身current && observer.value.observe(current)// 开始观察某个目标元素cleanup = () => {if (observer.value) {observer.value.disconnect()// 关闭监视器target.value && observer.value.unobserve(target.value)// 停止观察某个目标元素}}})//将方法暴露出来外部也可使用return {observer,stop: () => {cleanup()stopEffect()}}
}

不清楚方法配置项的可以看MDN Intersection Observer
组件中使用
将暂无其他数据的dom给到方法去监视

这里我只是简单演示方法,监视效果达后到可以自行更改ui和触底后的逻辑
html:

<div v-for='item in data' key='item' >{{item}}</div>
<div  ref="empty">{{"暂无其他数据" }}</div>

js部分

const empty = ref(null)
// 默认在初始创建节点时会触发一次,因为初始没有数据节点会在视图中完整呈现,也可以让节点在有数据的时候再创建
const { stop, observer } = useIntersectionObserver({target: empty,//最底部的domonIntersect: (entries: any[]) => {//isIntersecting:boolean 表示节点是否可见,intersectionRatio:number 表示节点可见度数值const isIntersecting = entries[0].isIntersecting || entries[0].intersectionRatioif (!isIntersecting) return... //此处写要实现的逻辑},threshold: 0.1//为1 表示dom完整呈现
})

如果需要详细讲解可以看这两篇文章:

https://juejin.cn/post/6844903927419256846
https://juejin.cn/post/6950464500491354126#heading-9

也可以去MDN Intersection Observer 查看完整配置项和方法

vue基于组合式API提供的@vueuse/core插件内的useIntersectionObserver
安装
npm i @vueuse/core

使用
useIntersectionObserver其实就是方便了我们之前封装的那个步骤,如果想要基于这个二次封装也是可以的

// 封装一个通用的方法实现数据的懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'export const useLazyData = (apiFn) => {// target表示组件的最外层div元素const target = ref(null)// 懒加载接口返回的数据const result = ref([])// 监听组件是否进入可视区const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {// 如果target对应的DOM进入可视区,那么该回调函数就触发if (isIntersecting) {// 被监听的DOM进入了可视区:此时调用接口获取数据;停止继续监听stop()... //此处写要实现的逻辑}})// result表示接口懒加载获取的业务数据// target表示被监听的DOM元素,需要在模板中被ref属性绑定return { result, target }
}

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

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

相关文章

ubuntu docker deamon无法连接的问题

现象 ubuntu 下使用docker&#xff0c;秃然一天报了一个错误 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running? 排查 排查了半天&#xff0c;是dockerd启动的时候指定的API listen 和默认的不一致。 systemctl 启动的时…

【JS】indexedDB基本入门使用;

本文基本仅做个人简单学习记录&#xff1b; 相关TS类型&#xff1a; IDBDatabase&#xff1a;open成功后的 result 为 IDBDatabase类型 > idb.result; transaction&#xff1a; transaction(storeNames: string | string[], mode?: IDBTransactionMode, options?: IDBTr…

C++入门全集(4):类与对象【下】

一、再谈构造函数 1.1 构造函数体内赋值 我们知道&#xff0c;在创建对象时&#xff0c;编译器会自动调用构造函数给对象中的各个成员变量一个合适的初始值 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;}private:int _yea…

windows zip压缩报错includes characters that cannot be used in a compressed folder

Windows 用 zip 压缩文件夹时报错&#xff1a; <文件> cannot be compressed because includes characters that cannot be used in a compressed folder, such as <非法字符>. You should rename this file or directory.同 [1]。考虑用 python 批量检测非 ascii…

SOCKS55代理 VS Http代理,如何选择?

在使用IPFoxy全球代理时&#xff0c;选择 SOCKS55代理还是HTTP代理&#xff1f;IPFoxy代理可以SOCKS55、Http协议自主切换&#xff0c;但要怎么选择&#xff1f;为解决这个问题&#xff0c;得充分了解两种代理的工作原理和配置情况。 在这篇文章中&#xff0c;我们会简要介绍 …

我常用的大模型和Prompt有哪些?

常用的大模型及其对比 以前提到过&#xff0c;我们公司鼓励大家多使用GPT这样的大模型&#xff0c;一方面能够提高工作效率&#xff0c;一方面使用的越多&#xff0c;越了解&#xff0c;越有可能发现应该怎么将其跟我们公司的产品结合起来。 但是出于安全考虑&#xff0c;如果…

Synchronized 详解(一)

在C程序代码中我们可以利用操作系统提供的互斥锁来实现同步块的互斥访问及线程的阻塞及唤醒等工作。在Java中除了提供Lock API外还在语法层面上提供了synchronized关键字来实现互斥同步原语,本文将对synchronized关键字详细分析。 带着问题去理解Synchronized 提示 请带着这…

10、BossCms代码审计

1、任意文件上传 限制 复现 POST /system/extend/ueditor/php/controller.php?actionuploadfile&encodeutf-8 HTTP/1.1 Host: bosscms.com Content-Length: 761 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome…

为什么要学习三维GIS开发?从技术层面告诉你答案

大家都知道GIS开发属于GIS行业中就业薪资较高的岗位&#xff0c;并且测绘、遥感以及城规等相关专业的毕业生纷纷转行做webgis开发。 那么&#xff0c;今天小编从技术层面探讨一下&#xff0c;为什么建议大家不要仅仅停留在webgis&#xff0c;而要继续往前学习三维GIS开发&…

TSINGSEE青犀AI智能分析网关V4智慧油田安全生产监管方案

一、方案背景 随着科技的不断发展&#xff0c;视频监控技术在油田行业中得到了广泛应用。为了提高油田生产的安全性和效率&#xff0c;建设一套智能视频监控平台保障安全生产显得尤为重要。本方案采用先进的视频分析技术、物联网技术、云计算技术、大数据和人工智能技术&#…

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

JavaWeb Tomcat启动、部署、配置、集成IDEA

web服务器软件 服务器是安装了服务器软件的计算机&#xff0c;在web服务器软件中&#xff0c;可以部署web项目&#xff0c;让用户通过浏览器来访问这些项目。 Web服务器是一个应用程序&#xff08;软件&#xff09;&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序…

MATLAB读取txt文本数据及可视化指南

MATLAB读取txt文本数据的说明指南 目录 MATLAB读取txt文本数据的说明指南摘要1. 数据准备2. 读取数据3. 绘制图形4. 小结 摘要 在MATLAB中&#xff0c;读取txt文本格式文件数据是一项基本的操作&#xff0c;特别是在数据分析和可视化方面。本文将介绍如何使用MATLAB读取txt文本…

C++ 基础知识

一. 预备知识 1. C的编程方式 过程性语言 (结构化、自顶向下)、面向对象语言、泛型编程 (创建独立于类型的代码) 2. 创建源代码文件的技巧 扩展名&#xff1a;.cpp 二. 第一个程序 - HelloWorld main() 入口点 返回 int 标准库 iostream std: 标准库的缩写 Statement…

HarmonyOS-使用call事件拉起指定UIAbility到后台

使用call事件拉起指定UIAbility到后台 许多应用希望借助卡片的能力&#xff0c;实现和应用在前台时相同的功能。例如音乐卡片&#xff0c;卡片上提供播放、暂停等按钮&#xff0c;点击不同按钮将触发音乐应用的不同功能&#xff0c;进而提高用户的体验。在卡片中使用postCardA…

科技的成就(五十七)

535、Machine Learning "1959 年 7 月&#xff0c;塞缪尔首创 Machine Learning 一词。塞缪尔在“Some Studies in Machine Learning Using theGame of Checkers”一文中给 Machine Learning 下了个非正式定义&#xff1a;没有明确编程指令的情况下&#xff0c;能让计算机…

【js中的作用域】

理解 js中的作用我们可以分为三个部分 全局作用域函数作用域块级作用域 全局作用域 不在任何函数内部或者大括号中声明的变量,都是再全局作用域下,全局声明的变量可以在程序中的任何位置访问 函数作用域 函数作用域也叫局部作用域,如果一个变量声名在一个函数内部,那么它…

LSTM进行字符级文本生成(pytorch实现)

文章目录 基于pytorch的LSTM进行字符集文本生成前言一、数据集二、代码实现 1.到入库和LSTM进行模型构建2.数据预处理函数3.训练函数4.预测函数5.文本生成函数6.主函数完整代码总结 前言 本文介绍了机器学习中深度学习的内容使用pytorch构建LSTM模型进行字符级文本生成任务 一…

王者荣耀整蛊搭建直播新玩法/obs贴纸配置教程

最近很火的王者荣耀整蛊直播&#xff0c;相信很多玩王者的玩家也想开一个直播&#xff0c;但是看到这种直播娱乐效果很有意思也想搭建一个&#xff0c;这里梦哥给大家出了一期搭建的教程&#xff01; 进阶版视频教程&#xff1a; 这期的教程是进阶版新玩法升级&#xff0c;具体…

Vue3:使用 Composition API 不需要 Pinia

在 Vue.js 开发的动态环境中&#xff0c;在单个组件中处理复杂的业务逻辑可能会导致笨重的文件和维护噩梦。虽然 Pinia 提供集中式状态管理&#xff0c;但仅依赖它来处理复杂的业务逻辑可能会导致代码混乱。本文探讨了使用 Composition API 的替代方法&#xff0c;说明开发人员…