Vue - PC 端列表下拉页面触底加载分页数据，监听浏览器屏幕触底事件，类似uni-app微信小程序的onReachBottom()页面触底生命周期函数（监听屏幕触底事件，实现懒加载效果）

已于 2025-01-19 15:22:19 修改
阅读量2.1k 收藏 4
点赞数 4
分类专栏： + Vue 文章标签： vue.js javascript H5 页面触底 懒加载/分页
于 2022-08-18 15:35:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/126405570
版权
+ Vue 专栏收录该内容
250 篇文章 ¥9.90 ¥99.00
订阅专栏
本文介绍如何在Vue项目中实现PC端列表的触底加载分页数据功能，确保在页面缩放或高度变化时依然有效。通过使用vue-infinite-scroll插件，实现类似uni-app微信小程序onReachBottom()的生命周期函数，提供完整源码和配置解析，适用于Vue2、Vue3和Nuxt项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

网上大部分教程 BUG 多且代码杂乱无章，虽然也完成了触底监听功能，但缩放页面或改变高度后，直接就会失效。代码非常不健壮！

本文将从 0-1 完成该功能，您只需要复制粘贴便可实现该功能，

完成了 PC 端浏览器触底懒加载， 适用于 Vue2 / Vue3 / Nuxt，

如下图所示，无论页面缩放、改变浏览器高度等等，触底监听 “始终” 有效：

方便您观察代码，示例仅提供了核心功能

在这里插入图片描述

有了这样一个基础框架，塞入您的数据即可轻松实现该功能。

第一步

由于

了解本专栏 订阅专栏 解锁全文
CPU TechTalk：Power Management and Supply（Ⅰ）
第五位面壁者
06-21 1488
速度和省电就像是矛与盾，二者相互依存却又此消彼长。
X86架构下Intel CPU的power management
zeewee1986的专栏
06-28 4844
这里不提power management的重要性，只说如何理解Intel CPU所提供的对于power management的支持。 在计算机系统里，几乎所有的设备在工作的时候都需要一个时钟频率，即clock，对于CPU来说也不例外。在Intel CPU里，和clock相关的东西有以下几个： core clock：这个是CPU中运算单元实际运行的频率；core refere
09-Maximum Power Mitigation Mechanism (MPMM)
baron-周贺贺-代码改变世界ctw
11-20 1703
MPMM 是一些 Arm Armv9-A 内核支持的可选微架构电源管理机制，从 Cortex-X2、Cortex-A710 和 Cortex-A510 内核开始。 这种机制检测和限制高活动事件，以协助 SoC 处理器电源域动态功率预算，并限制对过流条件的全轨（即时钟斩波）响应的触发。 MPMM 由 EL3 运行时固件基于每个内核启用。 固件无法在运行时确定 MPMM 的存在，因此平台必须通过两种可能的机制之一公开此信息： FCONF，由 ENABLE_MPMM_FCONF 构建选项控制。 plat_mpmm
Linux Power Management for x86 CPU (1)---- C-State
JK198310的专栏
10-16 4255
http://blog.sina.com.cn/s/blog_7014a5340100mv7m.html Linux Power Management for x86 CPU  (1)---- C-State ------------------------------------------------ Modern CPUs are more and more powerful.
Intel CPU Power Management
白杨谷的博客
05-09 6171
Linux中CPU频率那点事
IntelCPUPowerManagement培训.pdf
07-20
介绍了Intel CPU中Global States,Device States,CPU States,PCIE Link PM State,Sleep States
Ipsaki D,Voutetakis S,Seferlis P,et al. Power management strateg
06-21
在能源领域，电力管理系统（Power Management System，PMS）对于优化独立电力系统，尤其是那些依赖可再生能源和储存技术的系统，具有至关重要的作用。本文"Ipsaki D, Voutetakis S, Seferlis P, et al. Power ...
Clock.Power.Management.Advanced.Course.rar_单片机开发_PDF_
08-12
5. **电源管理策略**：介绍低功耗模式，如待机、睡眠、休眠等，以及如何在这些模式下切换，以减少不必要的功耗。 6. **电源转换技术**：探讨DC-DC转换器、LDO（低压差线性稳压器）等电源组件的工作原理和应用，以及...
PCIE Power Management.pdf
01-16
PCIE Power Management PCIE Power Management（Peripheral Component Interconnect Express Power Management）是指在PCIE总线中实现的电源管理技术。该技术的主要目的是降低PCIE设备的功耗，以延长电池的使用寿命...
dmx.zip_DMX_Dmx.zip_power management
09-22
本文将深入探讨标题"dmx.zip_DMX_Dmx.zip_power management"所涉及的DMX技术与电源管理，以及相关文档"power_management___6_channel_dmx_dimmer___an2302_12.pdf"的内容。 首先，DMX（Digital MultipleX）是一种...
NullCPUPowerManagement.kext
04-20
安装mac中必备驱动NullCPUPowerManagement.kext
TNKernel-Power-Management-Demo：超低功耗CPU的TNKernel电源管理（演示）
02-09
TNKernel电源管理演示 描述 此示例显示了低功耗睡眠和深度睡眠操作模式的用法微控制器（该项目用于TI MSP430X MCU，但可以使用任何其他低功耗MCU）。 该演示项目使用TNKernel RTOS 3.0版 自动切换到睡眠和深度睡眠模式非常有效。 该方法消除了不必要的活动时间，并获得了睡眠/深度睡眠性能。 1. CPU睡眠模式 每次，当所有任务完成其当前作业，并且系统进入空闲任务时， 系统检查深度睡眠状况（请参阅下文）。 如果没有深度睡眠条件，则系统进入睡眠模式： •CPU已停止（在LP3模式下） •将适当的硬件设置为睡眠模式 所有外围设备均保持不变。 任何系统中断都将使CPU进入常规操作模式。 2.深度睡眠概念 深度睡眠模式假定以最小的功耗工作。 在深度睡眠模式下： •CPU已停止（在LP3模式下）。 •禁用晶体振荡器20 MHZ，并从晶体32768Hz产生CPU时
usb.rar_power management
09-23
在“usb.rar_power management”这个主题中，我们可以深入探讨USB设备的电源管理抽象层。这一层的主要任务是处理USB设备的电源访问，确保它们在需要时能获得电力，而在空闲或不工作时则节省能源。 `usb.c`和`core.c...
Power Management
sunweizhong1024的专栏
12-03 8955
Power Management 迫切的想知道power management 的流程。 对整个流程稍微整理了下 参考这个链接http://blog.csdn.net/suntao222/article/details/8162938 还有这个链接;http://blog.csdn.net/tommy_wxie/article/details/7208633
PCIe扫盲——Power Management概述（一）
zsmcdut的博客
09-10 2239
转http://blog.chinaaet.com/justlxy/p/5100061872 PCIe总线定义的与功耗管理功能（Power Management，PM）相关的主要有：PCI-Compatible PM、Native PCIe Extensions、Bandwith Management和Event Timing Optimization。 其中，PCI-Compatible PM是一种在软件上和硬
【笔记】CPU 性能调节
NEWLIA 在 CSDN 的博客。
08-15 4089
CPU frequency scaling CPU Performance Scaling
arm64架构分析
tugouxp的专栏
04-24 5312
arm64架构分析 此文分析基于arm官方文档 ARM Architecture Reference Manual ARMv8, for ARMv8-A architecture profile ARM Architecture Reference Manual Supplement ARMv8.1, for ARMv8-A architecture profile Errata marku...
[architecture]-ARMV8的一些总结-一篇就够了
热门推荐
baron-周贺贺-代码改变世界ctw
09-29 1万+
ARM、armv8、armv9、arm架构、arm视频、添加vx : arm_2023 获取更多资料, arm资料、arm下载、arm学习、arm免费、arm课程， PE - processing element ARM体系结构定义了抽象机器的行为，称为处理元素（processing element），通常缩写为PE。与ARM体系结构兼容的实现必须符合处理元素所描述的行为。 RISC架构 ARM架构是一个精简指令集计算机(RISC)架构，具有以下RISC架构特征： - 一个大的统一寄存器文件。 - 一种
spring-boot-autoconfigure-2.5.9.jar中文-英文对照文档.zip
最新发布
05-11
# 压缩文件中包含： 中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖 源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 # 温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；
pcie power management
08-26
PCIe（Peripheral Component Interconnect Express）是一种计算机扩展总线接口，用于连接计算机主板和其他设备，如显卡、网卡和存储设备等。PCIe电源管理是一种技术，用于管理和控制这些设备的电源消耗，以提高能源效率和延长设备的寿命。 PCie电源管理有几个主要方面： 1. 睡眠模式（Sleep Mode）：当PCIe设备处于空闲状态时，可以进入睡眠模式以节省能源。睡眠模式可以降低设备的功耗，并将设备从活动状态转换为低功耗状态，以便待机使用。 2. 电源状态管理（Power State Management）：PCIe设备可以在不同的电源状态之间切换，根据需要调整功耗。例如，设备可以在正常模式、节能模式和待机模式之间切换，以便根据具体的工作负载和需求来调整功耗。 3. 数据传输优化：PCIe电源管理技术还可以优化数据传输，以降低功耗。例如，可以使用通过数据压缩和解压缩来减少数据传输量，从而降低功耗和延长设备的寿命。 4. 功耗监测和报告：PCIe电源管理技术可以监测设备的功耗，并提供相应的报告和统计数据。通过监测设备的功耗，用户可以了解设备的能耗情况，并采取相应的措施来优化设备的电源管理。 总之，PCIe电源管理是一种重要的技术，可以提高设备能源效率、延长设备寿命，并对整个计算机系统的能耗进行优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值