vue3 滚动条触底监听

问题:指定区域内,显示返回的数据,要求先显示20条,区域超出部分滚动显示,对滚动条进行监听,滚动条触底后,继续显示下20条...

解决过程:

1.在区域的div上,添加@scroll事件和ref属性

2.scrollTop值是滚动位置,根据滚动条的变化而变化,可以理解为是卷或者滚起来的高度

3.scrollHeight值是内容区域的高度

4.offsetHeight值是显示区域的高度,是padding、border、水平滚动条相加的高度,注意并不包含margin的高度

5.当scrollTop+offsetHeight大于等于内容区域本身的高度时,代表滚动条到底了,进行对数据的处理(此处根据实际情况写逻辑代码即可)

6.设立boolean值判断是否是请求第一页数据或者请求其他页数据并进行拼接

解决结果:

<div @scroll="scroll($event)" ref="scrollRef"><div v-for="item in list" :key="item.id"><div>{{item.name}}</div></div>
</div>
let list = ref([])
let loading = false
let num = 1
const scrollRef= ref(null)
const getData = bool => {loading = truegetTask(num).then(res => {loading = falseif (res.data.code !== 0) {return}if(!bool){list.value = res.data.datareturn}list.value = list.value.concat(res.data.data)  })
}
const scroll = event => {if(loading){return}let scrollTop = event.target.scrollToplet scrollHeight = event.target.scrollHeightlet offsetHeight = Math.ceil(event.target.getBoundingClientRect().height)let currentHeight = scrollTop + offsetHeightif (currentHeight >= scrollHeight) {num = num + 1//分页参数,根据实际接口自行修改即可getData(true)}
}

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

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

相关文章

Unity 切换场景

场景切换前必须要将场景拖动到Build中 同步加载场景 using System.Collections; using System.Collections.Generic; //using UnityEditor.SearchService; using UnityEngine; // 场景管理 需要导入该类 using UnityEngine.SceneManagement;public class c3 : MonoBehaviour {…

redis五大基础类型【重点】

之前写过一点小知识&#xff1a;https://blog.csdn.net/qq_45927881/article/details/134959181?spm1001.2014.3001.5501 参考链接 https://xiaolincoding.com/redis/data_struct/command.html#%E4%BB%8B%E7%BB%8D 目录 1. string&#xff08;字符串&#xff09;2. Hash&#…

MySql安全加固:配置不同用户不同账号禁止使用旧密码禁止MySql进程管理员权限

MySql安全加固&#xff1a;配置不同用户不同账号&禁止使用旧密码&禁止MySql进程管理员权限 1.1 检查是否配置不同用户不同账号1.2 检查是否禁止使用旧密码1.3 禁止MySql进程管理员权限 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496…

【c++】通讯录管理系统

1.系统功能介绍及展示 2.创建项目 3.菜单实现 4.退出功能实现 5.添加联系人—结构体设计 6.添加联系人—功能实现 7.显示联系人 8.删除练习人—检测联系人是否存在 9.删除联系人—功能实现 10.查找联系人 11.修改联系人 12.清空通讯录 #include <iostream> #include <…

什么是VR虚拟社区|VR元宇宙平台|VR主题馆加盟

VR虚拟社区是指一种基于虚拟现实技术构建的在线社交平台或环境&#xff0c;用户可以在其中创建虚拟化的个人形象&#xff08;也称为avatars&#xff09;并与其他用户进行交流、互动和合作。在VR虚拟社区中&#xff0c;用户可以选择不同的虚拟场景和环境&#xff0c;如虚拟公园、…

fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现

项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff1b; &#x1f451;&#x1f40b;&#x1f389;如果感觉项目还不错的话&#xff0c;还请点下 star &#x1f31f;&#x1f31f;&#x1f31f;。 Gitee&#xff1a;https://gitee.com/fei_fei27/fly-barrage&a…

显示器开机正常,插入HDMI线却不显示画面,换了HDMI线还是不行?

环境&#xff1a; 惠普/P24VG4 DELL笔记本 问题描述&#xff1a; 显示器开机正常&#xff0c;插入HDMI线却不显示画面&#xff0c;换了HDMI线还是不行&#xff0c;是不是显示器坏了&#xff1f; 解决方案&#xff1a; 1.前往显示器设置菜单里面查看input 2.把输入源默认设…

二百二十五、海豚调度器——用DolphinScheduler调度执行Flume数据采集任务

一、目的 数仓的数据源是Kafka&#xff0c;因此离线数仓需要用Flume采集Kafka中的数据到HDFS中 在实际项目中&#xff0c;不可能一直在Xshell中启动Flume任务&#xff0c;一是项目的Flume任务很多&#xff0c;二是一旦Xshell页面关闭Flume任务就会停止&#xff0c;这样非常不…

案例研究|DataEase助力众陶联应对产业链数据可视化挑战

佛山众陶联供应链服务有限公司&#xff08;以下简称为“众陶联”&#xff09;成立于2016年&#xff0c;是由34家陶瓷企业共同创办的建陶行业工业互联网平台&#xff0c;股东产值占整个行业的22.5%。众陶联以数据赋能为核心&#xff0c;积极探索新的交易和服务模式&#xff0c;构…

ant-design-vue如何限制图片上传的尺寸?

handleBeforeUpload(file, fileList) {// fileList 只包含了当次上传的文件列表&#xff0c;不包含已上传的文件列表// 所以长度要加上已上传的文件列表的长度const isLimit this.fileList.length fileList.length > this.limit;const indexOfFile fileList.findIndex(it…

C++ STL 之容器 vector 常见用法

一. 什么是vector vector为“变长数组”&#xff0c;即长度根据需要而自动改变的数组。 头文件&#xff1a; #include <vector>using namespace std;单独定义一个vector&#xff1a;vector<typename> name&#xff0c;相当于一维数组 name[SIZE] &#xff0c;其长…

mac-docker-php容器连接mac中的pgsql数据库失败以及出现table_msg存错误时的解决方法

以php中的thinkphp 5.1为例&#xff0c;php容器连接mac中的pgsql数据库失败时&#xff0c;出现如下错误 [7] PDOException in Connection.php line 528 SQLSTATE[08006] [7] could not connect to server: Connection refused Is the server running on host "localhost&…

Git 配置处理客户端无法正常访问到 github 原网站时,npm 下载依赖包失败的问题

Git 配置处理客户端无法正常访问到 github 原网站时&#xff0c;npm 下载依赖包失败的问题 使用 github 的镜像网站地址或类似的替代产品地址&#xff0c;代替到 npm 拉取依赖包的 git 地址本地Git配置 例如&#xff1a;执行一下命令&#xff0c;则是以https://kgithub.com 替…

requests库/urllib3库返回WEB响应内容的处理差异

requests库是一个广泛使用的HTTP库&#xff0c;用于发送HTTP请求和处理响应。 以下是requests库中一些主要类和方法的详细介绍&#xff1a;requests库主要类和方法 类:requests.models.Response: status_code: 响应状态码。text: 以Unicode形式返回响应内容。content: 以字节形…

MySQL的主从同步原理

MySQL的主从同步&#xff08;也称为复制&#xff09;是一种数据同步技术&#xff0c;用于将一个MySQL服务器&#xff08;主服务器&#xff09;上的数据和变更实时复制到另一个或多个MySQL服务器&#xff08;从服务器&#xff09;。这项技术支持数据备份、读写分离、故障恢复等多…

帝国cms7.5仿非小号区块链门户资讯网站源码 带手机版

帝国cms7.5仿非小号区块链门户资讯网站源码 带手机版 带自动采集 开发环境&#xff1a;帝国cms 7.5 安装环境&#xff1a;phpmysql 包含火车头采集规则和模块&#xff0c;采集目标站非小号官网。 专业的数字货币大数据平台模板&#xff0c;采用帝国cms7.5内核仿制&#xff0…

LeetCode_22_中等_括号生成

文章目录 1. 题目2. 思路及代码实现&#xff08;Python&#xff09;2.1 暴力法2.2 回溯法 1. 题目 数字 n n n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a; n 3 n 3 …

Ai-WB2-32S在window下使用vs 和 msys2编译以及烧录

文章目录 前言一、使用前准备第一步 安装vscode第二步 安装msys2 二、使用步骤1.打开MSYS2 MINGW64&#xff08;1&#xff09;在开始栏中找到MSYS2 MINGW64并打开&#xff08;2&#xff09;安装git&#xff08;3&#xff09;安装make&#xff08;4&#xff09;安装好之后的文件…

前端面试练习24.3.1

一.进程和线程的区别 进程&#xff1a;是程序的一次执行过程,拥有独立的内存空间 线程&#xff1a;是进程中的一个执行单元,共享所属进程的内存空间和系统资源 进程&#xff08;Process&#xff09;和线程&#xff08;Thread&#xff09;是操作系统中的重要概念&#xff0c;它…

Redis 之五:Redis 的主从复制

概念 主从复制&#xff0c;是指将一台 Redis 服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(master)&#xff0c;后者称为从节点(slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从节点。 默认情况下&#xff0c;每台Redis服务器都是主节…