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

【vue 监听页面滑动到底部】

监听页面滑动到底部

  • IntersectionObserver
  • scroll 事件监听器

IntersectionObserver

在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时,会触发IntersectionObserver的回调函数。

以下是一个监听触底的示例:

<template><div class="container" ref="container"><!-- 这里是数据列表 --></div>
</template><script>
export default {data() {return {observer: null,}},mounted() {// 创建 IntersectionObserver 实例this.observer = new IntersectionObserver(this.handleObserve, {root: null,rootMargin: '0px',threshold: 1.0,});// 监听容器底部this.observer.observe(this.$refs.container.lastChild);},methods: {handleObserve(entries) {entries.forEach((entry) => {if (entry.isIntersecting) {// 滚动到底部触发加载更多this.loadMoreData();}});},loadMoreData() {// 加载更多数据的逻辑},},
};
</script>

在mounted钩子函数中创建IntersectionObserver实例,并监听容器底部的元素。在handleObserve回调函数中判断当前元素是否可见,如果可见则触发加载更多数据的逻辑。

scroll 事件监听器

在 Vue 中监听页面滑动到底部的方法如下:

  1. 创建一个 scroll 事件监听器,并将事件绑定在根元素上(windowdocument.body)。
mounted() {window.addEventListener('scroll', this.handleScroll)
}
  1. 在事件处理函数 handleScroll 中,判断页面滚动到底部的条件,如果条件成立,执行自定义事件 scroll-to-bottom
methods: {handleScroll() {const scrollTop = document.documentElement.scrollTop || document.body.scrollTopconst scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeightconst clientHeight = document.documentElement.clientHeight || window.innerHeightif (scrollTop + clientHeight >= scrollHeight) {this.$emit('scroll-to-bottom')}}
}
  1. 在需要监听滚动到底部的组件中,使用 $on 方法监听自定义事件 scroll-to-bottom,并执行相应的操作。
<template><div><div v-for="item in list" :key="item.id">{{ item.text }}</div></div>
</template><script>
export default {data() {return {list: []}},mounted() {this.loadMore()this.$on('scroll-to-bottom', this.loadMore)},methods: {loadMore() {// TODO: 加载更多数据}}
}
</script>

相关文章:

【vue 监听页面滑动到底部】

监听页面滑动到底部 IntersectionObserverscroll 事件监听器 IntersectionObserver 在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时&#xff0c;会触发Int…...

(一)创建型设计模式:2、单例模式(C++实现实例 线程安全)

目录 1、单例模式&#xff08;Singleton Pattern&#xff09;的含义 2、单例模式的优缺点 &#xff08;1&#xff09;优点&#xff1a; &#xff08;2&#xff09;缺点&#xff1a; 3、C实现单例模式的示例&#xff08;简单&#xff09; 4、C实现单例模式的示例&#xff…...

《练习100》86~90

题目86 # 生成一个包含20个随机整数&#xff08;100以内&#xff09;的列表&#xff0c;对其中偶数索引&#xff08;下标&#xff09;的数据进行降序排列&#xff0c;奇数索引的元素不变 import random list1 [random.randint(0,100) for _ in range(20)] list2 list1[::2] …...

C++——命名空间、输入、输出

在我们接触C之前&#xff0c;C语言中有时候会有使用全局变量&#xff0c;全局变量在使用过程中可能会发生冲突&#xff0c;这个冲突有时会是我们与库之间的冲突&#xff0c;有时又会是我们自己定义的之间的冲突&#xff0c;那么这时候命名空间的出现将很好的解决这个问题&#…...

解锁滴滴ES的性能潜力:JDK 17和ZGC的升级之路

前文介绍了滴滴自研的ES强一致性多活是如何实现的&#xff0c;其中也提到为了提升查询性能和解决查询毛刺问题&#xff0c;滴滴ES原地升级JDK17和ZGC&#xff0c;在这个过程中我们遇到了哪些问题&#xff0c;怎样解决的&#xff0c;以及最终上线效果如何&#xff0c;这篇文章就…...

Permutation and Primes 2023牛客暑期多校训练营8 J

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一个数n&#xff0c;要求构造一个n的排列&#xff0c;满足相邻两个数的差或和是一个奇质数 2<n<1e5 思路&#xff1a;要满足相邻数的差或和是奇质数的话只有三种情况&#xff0c;要么当前数a[i]a[i-1]pr…...

centos如何配置IP地址?

CentOS如何查看和临时配置IP地址 CentOS系统中&#xff0c;可以通过使用ifconfig命令来查看当前本机的IP地址信息。输入ifconfig即可显示当前网络接口的IP地址、网络掩码和网关信息。如果需要设置临时IP地址&#xff0c;可以使用ifconfig命令后接网卡名称和需要设置的IP地址、网…...

git clone 报错Filename too long

1.使用git clone代码&#xff0c;爆出Filename too long错误 2.原因分析 因为我很少看git clone日志&#xff0c;所以从未想过是clone异常&#xff0c;而且也看到代码clone下来了&#xff0c;所以我就显然以为代码clone成功&#xff0c;但是使用idea打开代码后发现大量代码无法…...

【雕爷学编程】Arduino动手做(184)---快餐盒盖,极低成本搭建机器人实验平台3

吃完快餐粥&#xff0c;除了粥的味道不错之外&#xff0c;我对个快餐盒的圆盖子产生了兴趣&#xff0c;能否做个极低成本的简易机器人呢&#xff1f;也许只需要二十元左右 知识点&#xff1a;轮子&#xff08;wheel&#xff09; 中国词语。是用不同材料制成的圆形滚动物体。简…...

redis String类型命令

Redis的String类型是一种简单的键值对数据结构&#xff0c;常用的String类型命令有&#xff1a; SET key value&#xff1a;设置指定key的值为value。GET key&#xff1a;获取指定key的值。DEL key&#xff1a;删除指定key及其对应的值。INCR key&#xff1a;将指定key的值加1…...

Blazor 简单组件(0):简单介绍

文章目录 前言说明环境安装 前言 Blazor 这个技术还是比较新&#xff0c;相关的UI组件还在完善&#xff0c;我这里提供一下我个人的组件开发。 说明 本UI组件是基于BootstrapBlazor(以下简称BB)开发。 BootstrapBlazor 文档 环境安装 C#小轮子&#xff1a;Visual Studio自…...

在vue3+vite项目中使用jsx语法

如果我掏出下图&#xff0c;阁下除了私信我加入学习群&#xff0c;还能如何应对&#xff1f; 正文开始 前言一、下载资源二、利用vite工具引入babel插件总结 前言 最近在为部署人员开发辅助部署的工具&#xff0c;技术栈是vue3viteelectron&#xff0c;在使用jsx语法时&#x…...

HCIA 路由器工作原理 及其 静态路由配置

目录 1、路由器工作原理 2、获取未知网段的方法&#xff1a; 3、静态路由 1&#xff09;写法&#xff1a; 2&#xff09;扩展配置 a、环回接口 配置命令&#xff1a; 环回接口的作用&#xff1a; b、手工汇总 手工汇总作用&#xff1a; c、路由黑洞 d、缺省路由 配置…...

【Git】—— git的配置

目录 &#xff08;一&#xff09;忽略特殊⽂件 &#xff08;二&#xff09;给命令配置别名 &#xff08;一&#xff09;忽略特殊⽂件 在⽇常开发中&#xff0c;我们有些⽂件不想或者不应该提交到远端&#xff0c;⽐如保存了数据库密码的配置⽂件&#xff0c;那怎么让Git知道呢…...

[git] git基础知识

git是一个免费的、开源的分布式版本控制系统&#xff0c;可以快速高效地处理从小型到大型的各种项目 git易于学习&#xff0c;性能极快 什么是版本控制&#xff1f; 版本控制是一种记录文件内容变化&#xff0c;以便将来查阅特定版本修订情况&#xff0c;可以记录文件修改历史…...

【从零学习python 】15.深入了解字符串及字符集编码

文章目录 字符集字符和编码相互转换编码规则 学习目标成员运算符in运算符not in 运算符 进阶案例 字符集 计算机只能处理数字(其实就是数字0和数字1)&#xff0c;如果要处理文本&#xff0c;就必须先把文本转换为数字才能处理。最早的计算机在设计时采用8个比特&#xff08;bi…...

【LeetCode】打家劫舍||

打家劫舍|| 题目描述算法分析编程代码 链接: 打家劫舍|| 在做这个题之前&#xff0c;建议大家做一下这个链接: 按摩师 我的博客里也有这个题的讲解&#xff0c;名字是按摩师 题目描述 算法分析 编程代码 class Solution { public:int maxrob(vector<int>nums,int left,…...

【Nginx】Nginx的重定向——location

location 匹配URI location 匹配的规则和优先级&#xff1b;***重点 nginx常用的变量&#xff1b;要求掌握 rewrite 重定向&#xff1b;掌握/理解 location匹配&#xff1a;*** 正则表达式&#xff1a;匹配的是文件内容 常见的正则表达式&#xff1a…...

每日一题——滑动窗口的最大值

滑动窗口的最大值 题目链接 暴力解法 最容易想到的当然还是通过两层循环来暴力求解&#xff1a;一层循环用来移动窗口&#xff0c;一层循环用来在窗口内找到最大值。这种做法的时间复杂度为O(kN)&#xff0c;会超出时间限制&#xff0c;因此&#xff0c;我们要找到更加高效的…...

【使用go开发区块链】之获取链上数据(03)

上篇文章&#xff0c;我们完成了数据库的连接&#xff0c;本章节&#xff0c;我们将完成ethclient的配置以及初始化 1、ethclient配置 1.1、安装go-ethereum 在命令行终端输入下面代码安装&#xff1a; go get github.com/ethereum/go-ethereum1.2、Ethclient配置 1.2.1、新…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...