当前位置: 首页 > news >正文

封装一个上拉加载的组件(无限滚动)

一、封装
1.这个是在vue3环境下的封装
2.整体思路:
2.1传入一个elRef,其实就是一个使用页面的ref。
2.2也可以不传elRef,则默认滚动的是window。

import { onMounted, onUnmounted, ref } from 'vue';
import { throttle } from 'underscore';export default function useScroll(elRef) {let el = windowconst isReachBottm = ref(false)const clientHeight = ref(0)const scrollTop = ref(0)const scrollHeight = ref(0)const scrollListenerHandler = throttle(() => {if(el == window) {clientHeight.value = document.documentElement.clientHeight;  // 当前浏览器窗口的“可视区域”的高度scrollTop.value = document.documentElement.scrollTop;  // 用于获取文档(通常是 HTML 文档)相对于其顶部的滚动距离scrollHeight.value = document.documentElement.scrollHeight;  // 获取到的是整个 HTML 文档的高度,包括所有可见和不可见的内容(即滚动条可滚动的总高度)}else {clientHeight.value = el.clientHeight;scrollTop.value = el.scrollTop;scrollHeight.value = el.scrollHeight;}if (clientHeight.value + scrollTop.value >= scrollHeight.value) {isReachBottm.value = true}}, 100)onMounted(() => {if(elRef) el = elRef.valueel.addEventListener("scroll", scrollListenerHandler)})onUnmounted(() => {el.removeEventListener("scroll", scrollListenerHandler)})return { isReachBottm, clientHeight, scrollTop, scrollHeight }
}

二、使用

import { watch, ref, computed } from 'vue';
import useScroll from '@/hooks/useScroll';
const { isReachBottm, clientHeight, scrollTop, scrollHeight } = useScroll()watch(isReachBottm, (newValue) => {if (newValue) {homeStore.fetchHouselistData()isReachBottm.value = false}
})const isShowSearchBar = computed(() => {return scrollTop.value >= 350
})

相关文章:

封装一个上拉加载的组件(无限滚动)

一、封装 1.这个是在vue3环境下的封装 2.整体思路: 2.1传入一个elRef,其实就是一个使用页面的ref。 2.2也可以不传elRef,则默认滚动的是window。 import { onMounted, onUnmounted, ref } from vue; import { throttle } from underscore;ex…...

WHAT - 高性能和内存安全的 Rust(二)

目录 1. 所有权(Ownership)2. 借用(Borrowing)不可变借用可变借用 3. 可变性(Mutability)4. 作用域(Scope)综合示例 了解 Rust 的所有权(ownership)、借用&am…...

办理河南建筑工程乙级设计资质的流程与要点

办理河南建筑工程乙级设计资质的流程与要点 办理河南建筑工程乙级设计资质的流程与要点主要包括以下几个方面: 流程: 工商注册与资质规划:确保企业具有独立法人资格,完成工商注册,并明确乙级设计资质的具体要求&…...

分类算法和回归算法区别

分类算法和回归算法在机器学习中扮演着不同的角色,它们的主要区别体现在输出类型、应用场景以及算法目标上。以下是对两者区别和使用场景的详细分析: 一、区别 1.输出类型: 分类算法:输出是离散的类别标签,通常表示为…...

利用Frp实现内网穿透(docker实现)

文章目录 1、WSL子系统配置2、腾讯云服务器安装frps2.1、创建配置文件2.2 、创建frps容器 3、WSL2子系统Centos服务器安装frpc服务3.1、安装docker3.2、创建配置文件3.3 、创建frpc容器 4、WSL2子系统Centos服务器安装nginx服务 环境配置:一台公网服务器&#xff08…...

怎么用Excel生成标签打印模板,自动生成二维码

环境: EXCEL2021 16.0 问题描述: 怎么用excel生成标签打印模板自动生成二维码 解决方案: 在Excel中生成标签打印模板并自动生成二维码,可以通过以下几个步骤完成: 1. 准备数据 首先,确保你的Excel表…...

java基于ssm+jsp 美食推荐管理系统

1前台首页功能模块 美食推荐管理系统,在系统首页可以查看首页、热门美食、美食教程、美食店铺、美食社区、美食资讯、我的、跳转到后台等内容,如图1所示。 图1前台首页功能界面图 用户注册,在注册页面可以填写用户名、密码、姓名、联系电话等…...

数据分析:置换检验Permutation Test

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2 介绍 置换检验是一种非参数统计方法,它不依赖于数据的分布形态,因此特别适…...

【React】使用Token做路由权限控制

在components/AuthRoute/index.js中 import { getToken } from /utils import { Navigate } from react-router-domconst AuthRoute ({ children }) > {const isToken getToken()if (isToken) {return <>{children}</>} else {return <Navigate to"/…...

机器学习周记(第四十四周:Robformer)2024.6.17~2024.6.23

目录 摘要ABSTRACT1 论文信息1.1 论文标题1.2 论文摘要1.3 论文引言1.4 论文贡献 2 论文模型2.1 问题描述2.2 Robformer2.2.1 Encoder2.2.2 Decoder 2.3 鲁棒序列分解模块2.4 季节性成分调整模块 摘要 本周阅读了一篇利用改进 Transformer 进行长时间序列预测的论文。论文模型…...

JAVA学习笔记DAY10——SpringBoot基础

文章目录 SpringBoot3 介绍SpringBoot 快速入门SpringBootApplication SpringBoot 配置文件统一配置管理Yaml 配置优势tips SpringBoot 整合 SpringMVC静态资源拦截器 interceptor SpringBoot 整合 DruidSpringBoot 整合 MybatisSpringBoot 整合 tx aopSpringBoot 打包 SpringB…...

如何在Android中实现多线程与线程池?

目录 一、Android介绍二、什么是多线程三、什么是线程池四、如何在Android中实现多线程与线程池 一、Android介绍 Android是一种基于Linux内核的开源操作系统&#xff0c;由Google公司领导开发。它最初于2007年发布&#xff0c;旨在为移动设备提供一种统一、可扩展的操作系统。…...

SCI绘图【1】-不同颜色表示密度和差异--密度图

参考资料&#xff1a;密度图&#xff08;Density Plot&#xff09; - 数据可视化图表 - 数字孪生百科 密度图是快速观察变量数值分布的有效方法之一。通常情况下&#xff0c;会根据两个变量将平面绘图区域分为非常多的子区域&#xff0c;之后以不同颜色表示落在该区域上样本的…...

C语言 while循环1

在C语言里有3种循环&#xff1a;while循环 do while 循环 for循环 while语句 //while语法结构 while&#xff08;表达式&#xff09;循环语句; 比如在屏幕上打印1-10 在while循环中 break用于永久的终止循环 在while循环中&#xff0c;continue的作用是跳过本次循环 …...

[C++][数据结构][LRU Cache]详细讲解

目录 1.什么是LRU Cache&#xff1f;2.LRU Cache实现 1.什么是LRU Cache&#xff1f; LRU是Least Recently Used的缩写&#xff0c;意思是最近最少使用&#xff0c;它是一种Cache替换算法。什么是 Cache&#xff1f; 狭义的Cache指的是位于CPU和主存间的快速RAM 通常它不像系统…...

怎样激励员工积极应用新版FMEA培训后的知识?

在快节奏的职场环境中&#xff0c;新版FMEA&#xff08;失效模式与影响分析&#xff09;的培训无疑是提升员工技能、优化工作流程的重要一环。然而&#xff0c;如何让员工积极地将所学知识应用于实际工作中&#xff0c;却是一个值得深入探讨的问题。下面&#xff0c;深圳天行健…...

WDF驱动开发-WDF总线枚举(一)

支持在总线驱动程序中进行 PnP 和电源管理 某些设备永久插入系统&#xff0c;而其他设备可以在系统运行时插入和拔出电源。 总线驱动 必须识别并报告连接到其总线的设备&#xff0c;并且他们必须发现并报告系统中设备的到达和离开情况。 总线驱动程序标识和报告的设备称为总线…...

React useEffect 执行时机

默认情况下&#xff0c;Effect 在每次渲染&#xff08;包括初始渲染&#xff09;后运行。 如果 React 的所有依赖项都与上次渲染时的值相同&#xff0c;则将跳过本次 Effect。 useEffect(() > {// 这里的代码会在每次渲染后执行 });useEffect(() > {// 这里的代码只会在…...

centos7 根目录扩容

1、先检查一下磁盘空间 [rootlocalhost ~]# lsblk 二、使用fdisk创建新分区 [rootlocalhost ~]# fdisk /dev/vdb 1、输入 p &#xff0c;查看当前分区表&#xff1b; 2、输入 n &#xff0c;新建一个分区&#xff1b; 3、再输入 p &#xff0c;选择分区类型为主分区&#x…...

为什么要做Redis分区和分片

Redis分区&#xff08;Partitioning&#xff09;和分片&#xff08;Sharding&#xff09;是将数据分布在多个Redis实例或多个节点上的做法。这种技术用于提高性能、可扩展性和可用性。以下是执行Redis分区和分片的主要原因&#xff1a; 1. **提高吞吐量**&#xff1a; - 通…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...