uni-app实现分页--（2）分页加载，首页下拉触底加载更多

已于 2024-04-12 09:11:24 修改
阅读量730 收藏
点赞数 3
文章标签： uni-app
于 2024-04-12 09:11:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cozy666/article/details/137605696
版权

业务逻辑如下：

api函数升级

定义分页参数类型

组件调用api传参

羊吖
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
【uniapp】实现上拉加载、下拉刷新，以及分页效果
qq_36375343的博客
02-23 1548
【代码】【uniapp】实现上拉加载、下拉刷新，以及分页效果。
uniapp里面分页加载数据，下方的加载方式的两种方法的总结
maliao5的博客
02-27 1211
请求回来的data.lists里面长度大于0，就是有数据，则把数据拼接到之前那数据变量中，加载状态变为加载前的转态。1.刚进入页面，在onShow中会调用获取商品数据的方法，里面进行判断加载状态，加载状态默认值为加载前，所以执行下面的事情将加载状态赋值为加载中，然后请求数据，请求的参数是数据长度和几条数据，请求回来的数据进行判断，4001是没登录，就去登录。请求回来的data.lists里面长度大于0，就是有数据，则把数据拼接到之前那数据变量中，加载状态变为加载前的转态。加载动画状态，加载前的状态。
H5 uniapp+uview+vue3 触底分页操作
最新发布
hyumi9982的博客
04-16 397
页面结构如下，将需要滑动的区域用scroll-view标签抱起来 设置scroll-y属性 并且要给这个一个明确的高度才会生效。而这个scrolltolower就是滑动触底时会触发的事件，将需要操作（发送请求）的逻辑写在事件执行函数里即可。之后在箭头函数里面写触底需要执行的逻辑即可（注释掉的是我的逻辑 不用管）注：方法2的页面貌似不能有scroll-view标签 否则貌似会失效？1.页面是局部滑动的 最上方有些内容固定，只留部分空间进行滑动。1.页面是局部滑动的 最上方有些内容固定，只留部分空间进行滑动。
uniapp分页加载数据及下拉刷新
weixin_48046344的博客
12-06 554
uniapp分页加载数据
Uniapp中分页触底加载的实现方式
babyxuqian的博客
08-05 5633
JavaScript部分 <script> import { indexBaseSstaffinfoList } from '@/utils/api.js' //调用api请求接口 export default { data() { return { nurseList:null, //数据 total: null, //总条数 data: { pageNum: 1, //页数
uniapp小程序 触底刷新（onReachBottom）加载分页
小菜儿前端的博客
10-20 1036
【代码】uniapp小程序 触底刷新（onReachBottom）加载分页。
uniapp滚动加载 下拉刷新
2303_76218115的博客
06-01 1万+
在日常开发中，滚动加载和下拉刷新是非常常见的功能，页面数据过多时，需要滚动加载优化性能，本篇技术分享博客将介绍如何在uniapp中实现滚动加载和下拉刷新。至此，我们已经成功地实现了滚动加载和下拉刷新两种常见的移动端功能。大家可以进行扩充或者留言交流！通过以上示例代码，我们可以看到uniapp提供了非常方便的API来实现这些功能，使得开发者可以更加专注于业务逻辑的实现。
【Uniapp小程序】实现上滑加载分页（触底加载）附后端Thinkphp代码
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-02 1323
实现触底加载我们需要用到。
一篇教你 uniapp 往下滑动 实现分页
weixin_45870300的博客
12-19 5468
例如：。 总结 自身拥有越丰富，他在别人身上所能发现得到的就越少，加油各位，原神启动！！！！
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
Uni-app 实现图片上传、删除、预览、压缩；
02-19
Uni-app 实现图片上传、删除、预览、压缩； 真正的开箱即用。
uni-app调用Android原生可以实现通信及打开WiFi
01-13
uni-app调用Android原生可以实现通信及打开WiFi
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uniapp触底加载分页简易版
weixin_51426266的博客
10-26 464
uniapp触底分页加载简易版
uni-app - 页面上拉触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据（判断分页懒加载是否继续请求接口数据，超详细触底请求后端示例教程）
王佳斌
10-07 3544
官方推荐最好用的uni-app上拉加载onReachBottom()如何实现懒加载分页判断，页面滚动到底部后请求数据填充到data中，使用onreachBottom实现页面触底加载及分页，uni-app项目序页面触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据（高效自动判断分页懒加载是否继续请求接口数据，超详细触底请求后端示例教程）uniapp 上拉加载onReachBottom官方文档详解，实现上拉触底onReachBottom数据分页请求，设置触
uniapp列表分页，上拉加载，下拉刷新
zyl23456的博客
01-19 1003
列表分页
uniapp上拉加载更多与下拉刷新
前端小陈的成长记录
06-14 4231
uniapp上拉加载更多、下拉刷新、数据深拷贝
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）
热门推荐
LeeBrook0的博客
11-16 1万+
开门见山地说，在移动端开发中，80%的项目都会涉及到列表展示，而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多。本篇文章主要介绍在使用uniapp开发移动端的过程中，比较好用的一个下拉及上拉组件，节约大家选择组件的时间，其完美适配uniapp，并可以实现一套代码打包成app，H5及小程序使用。这样就可以实现一个简单的下拉刷新和上拉加载更多，当然这个组件有更多的方法及支持更多的拓展功能，在此就不一一介绍了，主要是分享一个基础的入门方法给大家。引入成功后，我们就可以在界面中使用我们的组件了。
uni-app 触底加载
08-13
Uni-app 是一个基于 Vue.js 的跨平台开发框架，可用于开发多个平台的应用程序，包括小程序、H5、App等。在 Uni-app 中实现触底加载的功能，可以通过监听滚动事件来判断是否滚动到页面底部，然后触发加载更多的操作。 下面是一个简单的示例代码： 1. 在页面的 `onLoad` 生命周期中初始化数据： ```javascript onLoad() { this.page = 1; // 初始化页码 this.list = []; // 初始化数据列表 this.loadMore(); // 加载第一页数据 }, ``` 2. 监听页面滚动事件，在滚动到页面底部时触发加载更多的操作： ```javascript onPageScroll(e) { // 页面可视高度 const windowHeight = uni.getSystemInfoSync().windowHeight; // 页面总高度 const pageHeight = uni.createSelectorQuery().select('.page-content').boundingClientRect().height; // 滚动条位置 const scrollTop = e.scrollTop; // 判断是否滚动到底部 if (scrollTop + windowHeight >= pageHeight) { this.loadMore(); } }, ``` 3. 加载更多数据的方法： ```javascript loadMore() { // 发送请求获取数据，并更新数据列表 uni.request({ url: 'http://example.com/api/data', data: { page: this.page, pageSize: 10, // 每页数据条数 }, success: (res) => { this.list = this.list.concat(res.data); // 更新数据列表 this.page++; // 页码递增 }, }); }, ``` 这样，当页面滚动到底部时，会自动触发加载更多数据的操作。你可以根据实际需求进行适当的修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值