vue原生div做触底加载

第一种:

触底加载和图片懒加载的思路一样,屏幕的高度加上滚动的高度快要大于最后一个元素距离顶部的高度的时候就开始加载数据;

(1)clientHeight:屏幕的高度;

(2)scrollTop:滚动的高度;

(3)offsetTop:最后一个元素距离顶部的高度;

if ((clientHeight + scrollTop + 快要到底的高度) >= offsetTop) 获取数据;

以下代码实例:

html代码:

<el-tooltip content="打开搜索框" placement="bottom" effect="light"><i class="el-icon-search" @click.stop="openSearch"></i>
</el-tooltip><!-- 搜索弹框 -->
<div class="searchMask" v-if="searchTemplateShow" @click.stop><div class="searchBox" @click.stop><div class="searchHeader"><i class="el-icon-close" @click.stop="searchTemplateShow = false"></i><el-inputv-model="searchInfo.title"placeholder="搜索模版"clearableprefix-icon="el-icon-search"@keyup.enter.native="search"@keyup.ctrl.enter.native="openNewLink"style="width: 100%;"class="input-with-select"><el-select v-model="templateType" slot="prepend" placeholder="请选择模版类型" @change="search"><el-option v-for="item in templateTypeData" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-input></div><div class="emptySearch" v-if="wtf"><img src="@/assets/img/emptySearch.png" /><div>搜索无结果</div></div><div class="searchCenter" v-else><div class="searchContent" v-loading="templateLoading" :style="`height:${templateLoading ? '452px' : 'auto'};`"><div class="searchContentTitle">选择模版</div><div class="searchContentBox" ref="searchContentBox" @scroll="scrollBottom"><div class="searchItem" v-for="(item, index) in templateData" :key="item.id" @click.stop="createDoc(item.id)" :ref="`searchItem${index}`"><div class="searchItemIcon"><img src="@/assets/img/templateSearchIcon.png" /></div><div class="searchItemContent"><div class="searchItemTitle one" v-if="item.title">{{ item.title }}</div><div class="searchItemDesc" v-if="item.desc">{{ item.desc }}</div></div></div></div></div><div class="searchFooter"><span>{{ total || 0 }}</span><span>结果</span><span>支持ENTER搜索、CTRL+ENTER新窗口打开</span></div></div></div>
</div>

js变量代码:

// 搜索模版弹框
searchTemplateShow: false,
// 模版类型 1:热门 2:我的
templateType: 1,
templateTypeData: [{label: "热门",value: 1
},{label: "我的",value: 2
}],
// 搜索条件对象
searchInfo: {title: ""
},
// 搜索模版loading
templateLoading: false,
// 搜索模版数据
templateData: [],
page: 1,
total: null,
mask: true,
wtf: false

js方法代码:

/*** 搜索弹框显示*/
openSearch() {if (!this.userInfo.type) {this.showLogin = true;return false;};Object.keys(this.searchInfo).forEach(key => {this.searchInfo[key] = "";});this.searchTemplateShow = true;this.search();
},
/*** 搜索*/
search() {this.templateLoading = true;this.page = 1;this.templateData = [];this.mask = true;this.wtf = false;this.getTemplateData();
},
/*** 滚动到下面*/
scrollBottom() {let clientHeight = this.$refs.searchContentBox.clientHeight;let scrollTop = this.$refs.searchContentBox.scrollTop;let offsetTop = this.$refs[`searchItem${this.templateData.length - 1}`][0].offsetTop;if (((clientHeight + scrollTop + 300) >= offsetTop) && this.mask) this.getTemplateData();
},
/*** 获取模版数据*/
getTemplateData: debounce(async function () {this.templateLoading = true;let params = {...this.searchInfo,page: this.page,size: 10,is_not_template: 1}let res = await document.getTemplateData(params, this.templateType);if (res.code == 200) {this.templateLoading = false;res.data.data.forEach(item => {this.templateData.push(item);});this.total = res.data.total;this.wtf = this.templateData.length == 0 ? true : false;this.page == res.data.last_page ? this.mask = false : this.page++;};
}, 300),
/*** 打开新链接搜索*/
openNewLink() {window.open(window.location.href);
},
/*** 创建文档*/
createDoc(id) {if (!this.userInfo.type) {this.showLogin = true;return false;};this.$parent.createDoc(id);this.searchTemplateShow = false;
}

css代码:

.el-icon-search, .el-icon-plus {width: 24px;display: flex;align-items: center;justify-content: center;&:hover {background-color: rgba(0,0,0,.04);border-radius: 2px;cursor: pointer;}
}.searchMask {width: 100vw;height: 100vh;background-color: rgba(30, 30, 30, .8);position: fixed;bottom: 0;left: 0;z-index: 11;display: flex;align-items: center;flex-direction: column;justify-content: center;.searchBox {width: 600px;height: auto;background: #FFFFFF;box-shadow: 0px 6px 28px -3px rgba(165,165,165,0.36);border-radius: 10px;.searchHeader, .searchContentBox, .emptySearch, .searchContent, .searchFooter {width: 100%;box-sizing: border-box;}.searchHeader {height: 117px;padding: 60px 28px 13px 28px;border-bottom: 1px solid #F5F5F5;position: relative;.el-icon-close {position: absolute;top: 24px;right: 23px;font-size: 18px;color: #111111;cursor: pointer;}/deep/ .el-select .el-input {width: 95px;}/deep/ .input-with-select .el-input-group__prepend {background-color: #fff;}}.searchCenter {height: auto;.searchContent {height: auto;.searchContentTitle {width: 100%;box-sizing: border-box;padding: 20px 28px 10px 28px;font-weight: 400;font-size: 15px;color: #999999;}.searchContentBox {width: 100%;height: auto;max-height: 400px;overflow-y: auto;.searchItem {width: 100%;height: auto;box-sizing: border-box;padding: 12px 28px;display: flex;cursor: pointer;&:hover {background-color: rgba(51, 77, 102, 0.06);}.searchItemIcon {width: 16px;height: 16px;margin: 2px 12px 0 0;img {width: 100%;height: 100%;}}.searchItemContent {max-width: 508px;.searchHeader, .searchContent {max-width: 508px;font-weight: 400;}.searchItemTitle {font-size: 15px;color: #333333;line-height: 21px;}.searchItemDesc {font-size: 13px;color: #999999;line-height: 18px;}}}}}.searchFooter {height: 40px;padding: 10px 28px;box-shadow: 0 6px 28px -3px rgba(165,165,165,0.36);font-weight: 400;font-size: 14px;color: #999999;line-height: 20px;& > span:first-of-type {color: rgba(0, 0, 0, 0.64);margin-right: 5px;}& > span:last-of-type {color: rgba(0, 0, 0, 0.64);margin-left: 16px;}}}.emptySearch {height: 295px;font-size: 14px;color: rgba(0, 0, 0, 0.4);display: flex;flex-direction: column;justify-content: center;align-items: center;img {width: 128px;height: 128px;margin-bottom: 20px;}}}
}

 第二种:

使用element ui的v-infinite-scroll属性添加触底加载事件:

v-infinite-scroll=触底加载事件

例:

<template><ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"><li v-for="i in count" class="infinite-list-item">{{ i }}</li></ul>
</template><script>export default {data () {return {count: 0}},methods: {load () {this.count += 2}}}
</script>

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

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

相关文章

漫威争锋Marvel Rivals怎么搜索 锁区怎么搜 游戏搜不到怎么办

即将问世的《漫威争锋》&#xff08;Marvel Rivals&#xff09;作为一款万众期待的PvP射击游戏新星&#xff0c;荣耀携手漫威官方网站共同推出。定档5月11日清晨9时&#xff0c;封闭Alpha测试阶段将正式揭开序幕&#xff0c;持续时间长达十天之久。在此首轮测试窗口&#xff0c…

一个开源即时通讯源码

一个开源即时通讯源码 目前已经含服务端、PC、移动端即时通讯解决方案&#xff0c;主要包含以下内容。 服务端简介 不要被客户端迷惑了&#xff0c;真正值钱的是服务端&#xff0c; 服务是采用Java语言开发&#xff0c;基于spring cloud微服务体系开发的一套即时通讯服务端。…

栈结构(c语言)

1.栈的概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&am…

STM32的ADC详解

ADC即模拟数字转换器&#xff0c;通常用于将外部的模拟量信号转换为数字信号。STM32的ADC是12位逐次逼近型的模拟数字转换器&#xff0c;最大可以计数到4095&#xff0c;有18个通道&#xff0c;16个外部通道和2个内部通道。 ADC框图 ADC的功能框图可以分为七个部分&#xff1a…

RabbitMQ php amqp

Linux debian 安装 Windows php amqp 扩展 PECL :: Package :: amqp 将 php_amqp.dll 复制到 php 的 ext 目录下 将 rabbitmq.4.dll 复制到 c:\windows\system32 目录下 php.ini extensionamqp

记一次springboot jpa更新复杂几何类型报错Only simple geometries should be used

问题&#xff1a; 更新数据时&#xff0c; 几何字段MultiPolygon类型时报错&#xff1b; java.lang.IllegalStateException: Only simple geometries should be used 几何字段Point类型时不报错&#xff1b; 新增时字段存在MultiPolygon不报错。 查看日志可知&#xff0c;…

vscode 使用正则搜索

ctrl c 复制&#xff0c;内容如下&#xff1a; Vue3简介创建Vue3工程Vue3核心语法路由pinia组件通信其它 APIVue3新组件

Go 单元测试完全指南(一)- 基本测试流程

为什么写单元测试&#xff1f; 关于测试&#xff0c;有一张很经典的图&#xff0c;如下&#xff1a; 说明&#xff1a; 测试类型成本速度频率E2E 测试高慢低集成测试中中中单元测试低快高 也就是说&#xff0c;单元测试是最快、最便宜的测试方式。这不难理解&#xff0c;单元…

Baidu Comate:让编码实现无限可能

目录 1 背景介绍2 快速入门2.1 智能推荐功能2.2 智能生成功能2.2.1 智能注释2.2.2 智能生成2.2.3 智能调优2.2.4 代码解释 3 高兼容性4 即刻体验 1 背景介绍 Baidu Comate&#xff08;智能代码助手&#xff09;是基于文心大模型&#xff0c;结合百度积累多年的编程现场大数据和…

【MySQL数据库】丨一文详解 JdbcTemplate(Spring中的CRUD)

前言 JdbcTemplate 是 Spring框架 中提供的一个对象&#xff0c;用于简化JDBC操作。它使得数据库操作变得更为简单和方便&#xff0c;大大提高了开发效率。 文章目录 前言为何要使用JdbcTemplate在JdbcTemplate中执行SQL语句的方法大致分为3类&#xff1a;案例代码 JdbcTemplat…

word 毕业论文格式调整

添加页眉页脚 页眉 首先在页面上端页眉区域双击&#xff0c;即可出现“页眉和页脚”设置页面&#xff1a; 页眉左右两端对齐 如果想要页眉页脚左右两端对齐&#xff0c;可以选择添加三栏页眉&#xff0c;然后将中间那一栏删除&#xff0c;即可自动实现左右两端对齐&#x…

Linux 操作系统TCP、UDP

1、TCP服务器编写流程 头文件&#xff1a; #include <sys/socket.h> 1.1 创建套接字 函数原型&#xff1a; int socket(int domain, int type, int protocol); 参数&#xff1a; domain: 网域 AF_INET &#xff1a; IPv4 AF_INET6 &a…

fswatch工具:跟踪Linux中的文件和目录更改

fswatch是一个跨平台的文件更改监视器&#xff0c;当指定文件或目录的内容被更改或修改时&#xff0c;它会收到通知警报。 fswatch在不同的操作系统上执行多种类型的监视器&#xff0c;例如&#xff1a; 基于 Apple OS X 的文件系统事件 API 构建的监视器。基于kqueue的监视器…

WPF之DataGird应用

1&#xff0c;DataGrid相关属性 GridLinesVisibility&#xff1a;DataGrid网格线是否显示或者显示的方式。HorizontalGridLinesBrush&#xff1a;水平网格线画刷。VerticalGridLinesBrush&#xff1a;垂直网格线画刷。HorizontalScrollBarVisibility&#xff1a;水平滚动条可见…

ASP.NET MVC 如何使用 Form Authentication?

前言 .NET 的 Form Authentication 是一种基于表单的简单且灵活的身份验证机制&#xff0c;用户通过输入用户名和密码来登录应用程序&#xff0c;并且通过配置来控制用户访问权限。 在使用 Form Authentication 时&#xff0c;我们需要在 web.config 文件中配置身份验证和授权…

Spring Cloud Consul 4.1.1

该项目通过自动配置和绑定到 Spring 环境和其他 Spring 编程模型习惯用法&#xff0c;为 Spring Boot 应用程序提供 Consul 集成。通过一些简单的注释&#xff0c;您可以快速启用和配置应用程序内的常见模式&#xff0c;并使用基于 Consul 的组件构建大型分布式系统。提供的模式…

Spark云计算平台Databricks使用,第一个Spark应用程序WordCount

1 上传文件 上传words.txt文件&#xff1a;Spark云计算平台Databricks使用&#xff0c;上传文件-CSDN博客 上传的文件的路径是/FileStore/tables/words.txt&#xff0c;保存在AWS的S3 hello world hello hadoop hello world hello databricks hadoop hive hbase yarn spark …

利用BACnet分布式IO控制器优化Niagara楼宇自动化系统

在智能建筑领域&#xff0c;随着物联网技术的飞速发展&#xff0c;如何实现高效、灵活且安全的楼宇自动化控制成为了行业关注的焦点。BACnet IP分布式远程I/O模块&#xff0c;作为这一领域的创新成果&#xff0c;正逐渐成为连接智能建筑各子系统的关键桥梁&#xff0c;尤其在与…

短效http代理ip和动态http代理有什么联系?

http代理 是指在客户端和服务器放一个代理服务器进行http协议传输&#xff0c;代理服务器将客户端的请求转发给目标服务器&#xff0c;将响应的信息通过代理服务器返回给客户端。代理服务器可以做到缓存、转发等经过的请求或者响应的信息。从而保护用户的个人信息。 一、概念…

24pht春4

pht春4 A 给出一种比较复杂的构造 每个点连向的那堆点每一次都新建一个点&#xff0c;只要两个操作同时操作一个格子&#xff0c;那就肯定有先后顺序&#xff0c;通过这样子就可以建出一个DAG&#xff0c;现在只需要构造一个非1-n的拓扑序即可&#xff0c;这可以把拓扑排序拿…