触底加载的两种思路(以vue3前端和nodejs后端为例)

于 2024-07-06 10:13:31 发布
阅读量235 收藏
点赞数 3
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wth0212/article/details/140224305
版权

一:首先,nodejs后端的代码都是一样的.

 需要前端返回page参数,然后nodejs逻辑进行处理,截取页数和每页条数和总条数,

总条数用来作为判断是否有数据的条件,也可以不用,注意看下文

一:不用获取容器高度的.

pinia中进行的axios请求处理

在vue文件中进行pinia中数据的导入,继续进行方法操作

 

也可以使用后端传过来的totalpages判断数据是否加载完成

 

二:使用获取容器高度的.

容器的ref="da",看逻辑代码的处理.

下面接着是代码的逻辑处理

 

有什么建议,可以私信或评论!!! 

非闲人
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 和 Java 后端的交互
weixin_44976692的博客
06-09 4万+
通过本文的案例，我们详细介绍了如何在 Vue.js 前端与 Spring Boot 后端进行交互。我们创建了一个简单的用户管理系统，包含用户的创建和列表展示功能。希望这些内容对你理解和实现前后端分离架构有所帮助。如果你有任何问题或建议，请在评论区留言。
Vue项目中前端请求后端数据的两种方式
m0_67402564的博客
06-18 6170
1、JS方式，使用fetch函数，较底层 2、axios请求方式，可配置拦截器等，功能强大 首先需要需要封装axios实例，创建request.js文件 其次在main.js里引入 最后才可以在xx.vue文件中通过this.request使用 3、两者都有跨域问题，在后端配置CorsConfig.java文件...
实战教程：PC端触底加载的实现方法
Caleb的博客
06-06 611
随着单页应用的发展，很多网站采用了触底加载的技术，用户滚动到页面底部时，会自动加载更多内容，为用户提供了更好的使用体验。本文将介绍如何在PC端实现触底加载功能。本文介绍了在PC端实现触底加载的方法，主要通过判断用户是否已经滚动到页面底部来触发数据加载的行为。实际应用中需要避免重复加载、提示用户正在加载等注意事项。通过触底加载，可以有效提高用户体验，提升网站的用户留存和用户粘性。
前端如何用观察者设计模式实现页面滚动到底部请求下一页数据
yangxbai的博客
07-30 1414
前端如何用观察者设计模式实现页面滚动到底部请求下一页数据
react中的，（原生js和组件）上拉刷新，触底（下拉）刷新，回到顶部
kkkys_kkk的博客
12-13 1334
由于在某些浏览器下（例如 Chrome），当窗口内嵌页面高度小于显示器高度时，`window.screenTop` 的值会比实际值偏小（通常比 `window.screenY` 小一点），因此习惯上一般使用 `window.innerHeight+window.screenY>=window.screenTop-1` 或者 `window.innerHeight+window.screenY>=document.body.offsetHeight-1` 来判断浏览器是否滚动到页面底部。
【uniapp】上拉触底加载更多的两种方式,组件里面和页面里面 scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
$
02-20 8119
scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头
页面触底加载实现原理
qq_39077394的博客
07-22 3125
这个问题的思路就是内容盒子的内容滑动到最底部的时候，加载新的内容。 判断上述情况需要有三个值： 1、内容盒子的高度 2、盒子里内容的总高度 3、滚动条的scrollTop 获取到三个值以后，只需要判断内容盒子的高度+滚动条的scrollTop = 盒子内容的高度即为触底。 我这里用的是自定义盒子，将盒子样式设置为overflow-y:auto，通过里面的scroll方法来监听判断滚动的距离是否触底： getScroll(e) { //我这里用了节流 控制频率 //这里的timeout需要提前
黑马电商后台管理系统前端vue后端nodejs.zip
12-02
本资料“黑马电商后台管理系统前端vue后端nodejs.zip”提供了全面的前端Vue.js与后端Node.js的实践案例，帮助开发者深入理解这两项技术在电商后台中的应用。 Vue.js，一款轻量级的前端JavaScript框架，以其简洁的...
Vue3 + nodejs 实战 - 文件上传项目 （图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）后端源码
10-19
这个就是Vue3 + nodejs 实战 --- 文件上传项目的前端源码（Vue3）+ 后端（Nodejs），实现的文件上传的代码，主要实现了（图片上传，多文件上传，拖拽上传，大文件分片上传，断点续传）这些功能，如果对文件上传有...
校园订餐系统，前端vue2，后端nodejs，本人的毕业设计，学前端的小伙伴
最新发布
09-06
校园订餐系统，前端vue2，后端nodejs，本人的毕业设计，学前端的小伙伴用来应付毕业设计应该还是_HKUST-catering
前端学习：dom-js实现导航栏，回到顶部，触底加载更多，吸顶效果，折合表
qq_45926448的博客
07-10 1223
js实现导航栏，回到顶部，触底加载更多，吸顶效果，折合表
【vue】页面触底加载（下拉加载loading）
zxsy19966的博客
10-17 716
【下拉加载】
H5app上滑加载/触底加载数据
qq_46870369的博客
07-06 685
h5app滑动到底部加载数据
vue原生div做触底加载
qq_43235503的博客
05-09 587
vue原生div做触底加载
vue3实现容器内容滚动到底，触底加载新数据
JackieDYH的博客
08-21 7305
在Vue3中，可以使用ref和onMounted钩子函数获取容器元素并监听滚动事件，判断内容是否滚动到了底部，从而触发加载新数据。在上面的示例中，使用ref获取了容器元素，items使用ref定义了列表数据，loading表示是否正在加载新数据，page表示当前页码数。函数是滚动事件的处理函数，首先获取容器元素，然后通过判断scrollTop和是否等于来判断内容是否滚动到了底部，如果是则触发loadMore加载新数据。loadMore函数首先判断是否正在加载数据，如果是则直接返回，否则设置loading。
滚动条的触底加载(原生和Vue实现三种方法)
weixin_46022934的博客
07-06 4144
滚动条的触底加载 一、触底加载的原理 1.原理如下所示： 2.代码如下所示 二、触底下载代码如下 1.原生JS实现触底加载，代码如下: 2.在Vue中如何使用
Vue触底加载
qq_44774622的博客
10-21 3353
vue触底加载：页面触底加载、容器内触底加载
前端处理10000条数据，触底加载
wgod
07-28 988
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery-3.4.1.min.js".
vue前端和nodejs后端交互
03-28
Vue前端和Node.js后端可以通过HTTP请求进行交互。 1. 前端使用Axios、Fetch等工具向后端发送HTTP请求，常见的有GET、POST、PUT、DELETE等请求方式。 2. 后端使用Express、Koa等框架监听HTTP请求，根据请求的URL和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值