首页 > 其他分享 >Vue3中滚动加载更多数据

Vue3中滚动加载更多数据

时间:2024-08-07 10:40:55浏览次数:13  
标签:scrollContainer 滚动 log output clientHeight value Vue3 scrollTop 加载

<div class="my-task-body-inner" ref="scrollContainer"  @scroll="handleScroll" style="height: 100%;overflow-y: auto;">

</div>


        const scrollContainer = ref(null);
		const handleScroll = () => {
			if(scrollContainer.value.scrollTop === 0) {
				return;
			}
			if (scrollContainer.value.scrollTop + scrollContainer.value.clientHeight >= scrollContainer.value.scrollHeight) {
				console.log('output-> scrollContainer.value.scrollTop:: ', scrollContainer.value.scrollTop)
				console.log('output-> scrollContainer.value.clientHeight:: ', scrollContainer.value.clientHeight)
				console.log('output-> scrollContainer.value.scrollHeight:: ', scrollContainer.value.scrollHeight)
				if(total.value <= payload.value.pageSize) {
					message.warning('没有更多数据了');
					return;
				}
				payload.value.pageNum = 1;
				payload.value.pageSize = payload.value.pageSize + 10;
				getApplicationListFn();
				console.log('output-> 到达底部,加载更多数据')
			}
		}

标签:scrollContainer,滚动,log,output,clientHeight,value,Vue3,scrollTop,加载
From: https://www.cnblogs.com/openmind-ink/p/18346538

相关文章

  • 基于Vue2+ElementUI/Vue3+ElementPlus对el-notification增加倒计时进度条特效,鼠标移入
    遇到一个需求就是对这个el-notification加一个倒计时进度条,方便用户知道该通知何时自动关闭。一、示例代码(1)基于Vue2+ElementUI的项目<template><div><el-button@click="showTip">doit</el-button></div></template><script>exportdefault{......
  • uniapp vue3 转换华为鸿蒙(以及问题一些解决方案)
         主要是从Windows系统配置、配置离线SDK和DevEco-Studio、HBuilderX、三方面进行配置。     因为我也是之前写小程序的用uniappvue3写的看官网(uni-app开发鸿蒙应用|uni-app官网)的时候看到vue3uniapp写法可以转换华为鸿蒙开发,我就自己来尝试一......
  • MapperScannerConfigurer中获取applicayion.yml配置,进行动态加载BasePackage
     由于在MapperScannerConfigurer的bean优先于@value,导致@value取出来的时候都是null,所以只能使用Environment来获取值importorg.mybatis.spring.mapper.MapperScannerConfigurer;importorg.springframework.beans.factory.annotation.Value;importorg.springframework......
  • pytorch 模型加载和保存
    模型加载torch.load(f,map_location=None,pickle_module=<module'pickle'from'/opt/conda/lib/python3.6/pickle.py'>,**pickle_load_args) map_location适用于修改模型能在gpu上运行还是cpu上运行。一般情况下,加载模型,主要用于预测新来的一组样本。预测的主要流程包......
  • 在Vue3中如何为路由Query参数标注类型
    前言最近发布了一款支持IOC容器的Vue3框架:Zova。与以往的OOP或者Class方案不同,Zova在界面交互层面仍然采用Setup语法,仅仅在业务层面引入IOC容器。IOC容器犹如一把钥匙,为我们打开了业务工程化的大门,允许我们探索更多工程化方面的设计和能力。有网友提出一个非常好的建议:可否提供一......
  • vue3+ts公司人员管理系统示例(接口版)
    vue3+ts公司人员管理系统示例(接口版)首先,让我们创建一个新的Vue3项目:vuecreatecompany-management-systemcdcompany-management-systemvueaddtypescriptnpminstallelement-plusaxios然后,我们来创建必要的文件和组件:在src/types目录下创建Employee.ts:/......
  • 用项目详细讲讲vue3路由
    1.【对路由的理解】VueRouter是Vue.js官方的路由管理器,它用于构建单页面应用(SPA),允许我们在不同的页面间进行导航,而无需刷新整个页面。 路由配置文件代码如下:import{createRouter,createWebHistory}from'vue-router'importHomefrom'@/pages/Home.vue'importNew......
  • python图表没有正确显示中文,这通常是因为matplotlib的默认设置不支持中文字符,或者相应
    如果图表没有正确显示中文,这通常是因为matplotlib的默认设置不支持中文字符,或者相应的字体没有正确加载。你可以通过指定支持中文的字体来解决这个问题。下面是如何设置matplotlib以确保能够在图表中显示中文的步骤:方法1:全局设置字体你可以修改matplotlib的全局配置,使......
  • [vue3] vue3初始化渲染流程
    组件初次渲染流程组件是对DOM树的抽象,组件的外观由template定义,模板在编译阶段会被转化为一个渲染函数,用于在运行时生成vnode。即组件在运行时的渲染步骤是:graphLR A[创建vnode]-->B[渲染vnode]-->C[生成DOM]vnode是一个用于描述视图的结构和属性的JavaScript对象。vnode......
  • [三、渲染控制法]4. LazyForEach:数据懒加载
    LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用。接口描述LazyForEach(dataSource:IDataSource,......