uniapp实现图片懒加载 封装组件

想要的效果就是窗口滑动到哪里,哪里的图片进行展示 主要原理使用IntersectionObserver

<template><view><image @error="HandlerError" :style="imgStyle" :src="imageSrc" :id="randomId" :mode="mode" class="music-img" /></view>
</template>
<script setup lang="ts">
import { uuid } from '@/utils/index'const instance = getCurrentInstance()
let observer2: any = null
const randomId = ref<string>('')
randomId.value = uuid()
type Props = {src: stringloadingSrc: stringimgStyle: anymode: stringclassName: string
}
const props = defineProps<Props>()
let src = computed(() => {return props.src || ''
})
let loadingSrc = computed(() => {return props.loadingSrc || ''
})
let imgStyle = computed(() => {return props.imgStyle || { width: '200rpx' }
})
let mode = computed(() => {return props.mode || ''
})let imageSrc = ref<string>('')imageSrc.value = loadingSrc.valueconst HandlerError = () => {}
onMounted(() => {if (imageSrc.value == loadingSrc.value) {// #ifdef APP || H5const observer = new IntersectionObserver((entries) => {if (entries[0].intersectionRatio > 0) { //进入页面的占比>0 就认为要显示const img = entries[0].targetimageSrc.value = src.valueobserver.unobserve(img)}},{root: null,rootMargin: '0px',threshold: 0.1})const img: Element | null = document.getElementById(`${randomId.value}`)if (img) {observer.observe(img)}// #endif// #ifndef APP || H5observer2 = uni.createIntersectionObserver(instance).relativeToViewport()observer2.observe('.music-img', (res) => {if (res.intersectionRatio > 0) {imageSrc.value = src.value}})// #endif}
})
onUnmounted(() => {// #ifndef APP || H5if (observer2) {observer2.disconnect()}// #endif
})
</script><style></style>

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

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

相关文章

Redis深度解析:核心数据类型与键操作全攻略

文章目录 前言redis数据类型string1. 设置单个字符串数据2.设置多个字符串类型的数据3.字符串拼接值4.根据键获取字符串的值5.根据多个键获取多个值6.自增自减7.获取字符串的长度8.比特流操作key操作a.查找键b.设置键值的过期时间c.查看键的有效期d.设置key的有效期e.判断键是否…

【matlab】回归预测——智能优化算法支持向量机

目录 引言 原理 应用 优势 总结 SVR安装 灰狼优化算法 代码实现 引言 原理 核心思想&#xff1a; SVR的目标是找到一个函数&#xff0c;该函数能够最小化预测误差&#xff0c;并在拟合过程中保持一定的间隔&#xff0c;使得大部分数据点都落在这个间隔之内。与SVM类似…

Google重大更新--解读Android Auto认证4.3

Google在今年五月更新了Android Auto 4.2.2版本&#xff0c;而在2024年7月他们推出了Android Auto 4.3版本&#xff0c;这是自2023年9月以来对Android Auto 4.2版本的一次重大更新。 为了确保合规性和顺利认证&#xff0c;OEM和Tire1必须确保PDK组件版本与正在认证的主机的Rece…

three.js 后期处理,物体高亮

效果图 代码 引入资源文件&#xff0c;在初始化时创建后处理对象 // 用于边缘高亮的插件// 引入后处理扩展库EffectComposer.jsimport { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";// 引入渲染器通道RenderPassimport { RenderPass }…

Kafka-服务端-网络层-源码流程

整体架构如下所示&#xff1a; responseQueue不在RequestChannel中&#xff0c;在Processor中&#xff0c;每个Processor内部有一个responseQueue 客户端发送的请求被Acceptor转发给Processor处理处理器将请求放到RequestChannel的requestQueue中KafkaRequestHandler取出reque…

深度解析Java世界中的对象镜像:浅拷贝与深拷贝的奥秘与应用

在Java编程的浩瀚宇宙中&#xff0c;对象拷贝是一项既基础又至关重要的技术。它直接关系到程序的性能、资源管理及数据安全性。然而&#xff0c;提及对象拷贝&#xff0c;不得不深入探讨其两大核心类型&#xff1a;浅拷贝&#xff08;Shallow Copy&#xff09;与深拷贝&#xf…

防爆智能手机如何解决危险环境下通信难题?

在化工厂、石油行业、矿山等危险环境中&#xff0c;通信安全一直是难题。传统手机因不具备防爆功能&#xff0c;可能引发火花、爆炸等安全风险&#xff0c;让工作人员在关键时刻难以及时沟通。但如今&#xff0c;防爆智能手机的出现彻底改变了这一现状&#xff01; 安全通信&am…

【Python】找Excel重复行

【背景】 找重复行虽然可以通过Excel实现,但是当数据量巨大时光是找结果就很费时间,所以考虑用Python实现。 【代码】 import pandas as pd# 读取Excel文件 file_path = your excel file path df = pd.read_excel(file_path)# 查找重复行 # 这里假设要检查所有列的重复项 …

手机如何充当电脑摄像头,新手使用教程分享(新)

手机如何充当电脑摄像头&#xff1f;随着科技的发展&#xff0c;智能手机已经成为我们日常生活中不可或缺的一部分。手机的摄像头除了拍摄记录美好瞬间之外&#xff0c;其实还有个妙用&#xff0c;那就是充当电脑的摄像头。手机摄像头充当电脑摄像头使用的话&#xff0c;我们就…

一分钟学习数据安全—自主管理身份SSI分布式加密密钥管理

在这篇之前&#xff0c;我们已经对SSI有了一个全局的了解。这个系列的文章可以作为一个学习笔记来参考&#xff0c;真正要实践其中的一些方案、协议&#xff0c;还需要参考专业的书籍和官方文档。作为一个SSI系列学习笔记的最后一篇&#xff0c;我们做一个简单的延伸&#xff0…

【中项第三版】系统集成项目管理工程师 | 第 9 章 项目管理概论① | 9.1 - 9.3

前言 第 9 章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节理论性较强&#xff0c;学习要以教材为准。本章分值预计在4-5分。 目录 9.1 PMBOK的发展 9.2 项目基本要素 9.2.1 项目基础 9.2.2 项目管理 9.2.3 项目成功的标准 9.2.4 项目、项目集、项目组合…

Lemo 的 AGI 应用实战博文导航

AGI系列&#xff08;1&#xff09;&#xff1a;掌握AI大模型提示词优化术&#xff0c;提问准确率飙升秘籍 AGI系列&#xff08;2&#xff09;&#xff1a;掌握AI大模型提示词优化术&#xff0c;从容应对各种提问场景 AGI系列&#xff08;3&#xff09;&#xff1a;2024年国内最…

多态的优点

多态的优点 1、多态的优点1.1 可替换性&#xff08;Substitutability&#xff09;2、可扩充性&#xff08;Extensibility&#xff09; 2、总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、多态的优点 在面向对象编程&#xff08;OOP…

无服务器【Serverless】架构的深度剖析:组件介绍、优缺点与适用场景

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、云计算的发展趋势 2、无服务器计算简介 二、无服务…

项目迭代中新老逻辑切流和对比 - 异步查询新接口

项目迭代中新老逻辑切流-切换入口项目迭代中新老逻辑切流 - 异步查询新接口项目迭代中新老逻辑切流 - 新老数据对比—待更新 前言 前面说到了 项目迭代中新老逻辑切换入口 &#xff0c;有兴趣的可以先看一下&#xff0c;不知道大家有什么疑问吗&#xff1f; 怎么知道自己新接…

红海云签约海新域集团,产业服务运营领军企业加速人力资源数字化转型

北京海新域城市更新集团有限公司&#xff08;以下简称“海新域集团”&#xff09;是北京市海淀国有资产投资集团有限公司一级监管企业&#xff0c;致力于成为国内领先的产业服务运营商。集团积极探索城市和产业升级新模式&#xff0c;通过对老旧、低效等空间载体重新定位规划、…

FPGA基本资源介绍

文章目录 FPGA资源介绍1.可编程输入输出单元(IOB)2.可配置逻辑块(CLB)3.数字时钟管理模块(DCM)4.嵌入式块RAM(BLOCK RAM / BRAM)4.1其他ram 5.丰富的布线资源6.底层内嵌功能单元7.内嵌专用硬核软核、硬核、以及固核的概念 FPGA资源介绍 1.可编程输入输出单元(IOB) 可编程输入…

C++视觉开发 五.答题卡识别

答题卡识别主要步骤 (1)反二值化&#xff0c;选项处理为前景&#xff08;白色&#xff09;&#xff0c;其它处理为背景&#xff08;黑色&#xff09;。 (2)每个选项提取出来&#xff0c;计算各选项白色像素点个数。 (3)筛选出白色像素点最多的选项作为考生答案。 (4)与标准答案…

【机器学习】连续字段的特征变换

介绍 除了离散变量的重编码外&#xff0c;有的时候我们也需要对连续变量进行转化&#xff0c;以提升模型表现或模型训练效率。在之前的内容中我们曾介绍了关于连续变量标准化和归一化的相关内容&#xff0c;对连续变量而言&#xff0c;标准化可以消除量纲影响并且加快梯度下降…

微信扫码进入小程序的webview页面,发现左上角没有home键

问题描述&#xff1a; 微信扫小程序二维码进到web-view内嵌h5页面&#xff0c;左上角没有返回小程序主页的home键&#xff0c;ios正常显示&#xff0c;Android 没有显示 导致的原因&#xff1a; 因为顶部导航栏我是自定义的 【如果是使用小程序原生的顶部导航栏是不会出现这种…