监听uniapp小程序页面滚动到底部实现数据加载

最新推荐文章于 2025-03-22 18:24:20 发布
最新推荐文章于 2025-03-22 18:24:20 发布
阅读量2.8k 收藏 3
点赞数 1
分类专栏： js 小程序 uniapp 文章标签： 小程序 uni-app 微信小程序 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51523667/article/details/129838598
版权
通过微信小程序的onReachBottom事件监听页面底部，动态修改分页页数，结合uniapp的加载更多组件，实现在用户滚动到底部时加载新数据。获取到数据后，使用concat方法将新数据无缝添加到原有数据列表中，提供流畅的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用微信小程序自带的生命周期事件：onReachBottom，可以监听到页面滚动到底部的时候。

修改获取数据的分页页数，配和uniapp组件加载更多，就可以实现下拉加载刷新的过程。

下面是示例

1.在data中初始化分页的页数

 2.在监听到页面滚动到底部时，修改页数，调用获取数组的方法并配合组件修改状态至加载中。

         加载组件

 

3.获取到新数据通过concat方法添加到原本的数据就完成了

 

 

微信小程序——监听页面滑动（二）判断用户在做向上滑动还是向下滑动（onScrollPage scroll-view）
XSL_HR的博客
06-01 6252
手把手教你通过监听页面滑动判断用户是在上滑还是在下滑
记录uniapp微信小程序上使用websocket实现聊天
qq_39235090的博客
10-18 3745
app.vue页面 里面的message.type 是和后台商量的类型。 <script> export default { data() { return { wsUrl: "wss://school.qifuxiong.com/wss/", lockReconnect: false, // 避免重复连接 formId: null, toId: null, heartCheck : { timeout: 30000,
uniapp监测滚动到底部加载下一页的数据。
2301_77742545的博客
12-06 2313
思路就是首先判断当前页有没有大于总页数，大于总页数就提示，小于就调用接口加载下一页，这样的写法是为了避免发出没有必要的请求。console.log('触底了', this.FormData.page);uniapp有检测滚动到·底部的API onReachBottom。title: '最后一页了',
uniapp上滑加载
最新发布
TZ1284063988的博客
03-22 378
/ 加载状态（more/loading/noMore）// 滚动触底事件处理（带防抖）/* 保持原有样式不变 */// 减去顶部导航栏高度。// 计算滚动容器高度。// 失败时回退页码。
uniapp在子组件监听滚动到底部事件
牛马程序员进阶之路
05-30 1600
uniapp在子组件监听滚动到底部事件
uniapp如何监听页面滚动
cccbbbmmm的博客
12-08 7714
2.使用组件的事件监听： 如果你的页面中包含有滚动的组件（例如scroll-view），你可以使用组件的事件监听来监听页面滚动事件。具体的事件名称和使用方法可以参考对应组件的官方文档。在UniApp中，你可以使用页面生命周期函数和组件的事件监听来监听页面滚动。以上是两种常用的监听页面滚动的方法，请根据你的具体需求选择适合的方式进行实现。
uniapp如何监听页面滚动？
weixin_56187723的博客
09-08 1623
函数会在页面滚动时触发，你可以在这个函数中获取到当前页面的滚动位置等信息。请根据你的具体需求选择适合的方法来监听页面或组件的滚动事件。在uni-app中，监听页面滚动主要通过在页面的。生命周期函数来实现。
uniapp小程序瀑布流组件包
02-01
当用户接近页面底部时，可以触发加载更多数据的逻辑，以实现无限滚动的效果。 6. **响应式设计**：uniapp支持响应式布局，因此瀑布流组件能够根据不同的设备尺寸和屏幕方向自动调整布局，确保在各种环境下都能提供...
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
首先，`uniapp`是一个基于Vue.js的多端开发框架，它允许开发者使用一套代码编写，同时发布到iOS、Android、Web（H5）、微信小程序等多个平台。uniapp提供了丰富的组件和API，简化了跨平台开发的复杂性。 `z-paging`...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
当用户滚动到页面底部时，此事件会被触发，开发者可以在事件处理函数中添加加载更多数据的逻辑。在加载完毕后，可以更新列表并提供适当的提示信息，例如“已加载全部”或“没有更多数据”。 6. **数据管理与渲染**...
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
综上所述，实现"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这一功能，需要结合uni-app的生命周期、数据管理、页面布局优化等多个技术点，确保在加载过程中提供平滑的用户体验。
uniapp页面滚动监听
chenrui310的博客
01-03 3869
先在前面总结下，下面一共有3种监听滚动的方法。昨天在做uniapp的图片懒加载，从网上找了个插件，导入到HBuilderX后，捣鼓了一晚上，总算是正常跑起来了。今天早上，把代码copy到项目上，结果只有第一屏的图片能展示，滑动后，下面的图片都不显示了！-_-!因为有了昨晚的经验，很快就定位到问题是滚动监听出现了问题。这个插件的图片懒加载一个关键的地方就是用到滚动监听。
uniapp 小程序 监听数据渲染完毕 获取高度 滚动条滚动到最底部
qq_47247479的博客
12-06 3747
uniapp 小程序 监听数据渲染完毕 获取高度 滚动条滚动到最底部
uni-app监听页面滚动
weixin_59525879的博客
09-16 2644
在uni-app中可以通过监听页面滚动事件来实现滚动效果或响应滚动事件。
uniapp监听下滑到底部时判断
thigh_d的博客
07-15 1万+
每下滑到底部调用一次后端接来监听 给当前页数默认设为第一页 监听页数大于多少页时，显示已是最后一页 调用接口判断是否执行，滑动到底部时，自动触发一次接口数据，直到滑动到最后一页 ...
uni-app中不使用scroll-view组件,监听页面滑直底部事件
qq_32900003的博客
10-20 2698
最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 页面 <template> <view class="content"> <!--目标节点--> <view class="text-area" id="listArea"> <view class="square" v-for="(v,i) in info" :ke
uniapp监听子组件的滚动
01-10 1084
子组件滚动
uni-app 监听页面滚动（页面或组件）
热门推荐
PrimaryColor
07-23 1万+
如果是页面，存放在“pages”下的文件,通过生命周期函数： onPageScroll(res) { console.log("页面滚动了") uni.$emit('onPageScroll', res.scrollTop); }, 如果是组件，存放在“components”下的文件，通过调用方法，监听页面滚动事件，代码： mounted() { var that = this; uni.$on('onPag
uniapp 开发小程序 滚动页面 顶部导航栏透明变白色
07-13
对于uniapp开发的小程序，你可以通过以下步骤来实现滚动页面时顶部导航栏的透明变白色： 1. 在App.vue中设置全局的顶部导航栏样式： ```css <style> .nav-bar { background-color: transparent; color: #ffffff; } </style> ``` 2. 在每个页面的.vue文件中，监听滚动事件并动态修改顶部导航栏的样式： ```html <template> <view> <!-- 这里是页面内容 --> </view> </template> <script> export default { onScroll(e) { // 获取滚动距离scrollTop const scrollTop = e.detail.scrollTop; // 设置滚动距离阈值，超过该值则将导航栏背景颜色设为白色，否则设为透明 const threshold = 100; // 获取导航栏节点 const navBar = uni.createSelectorQuery().select('.nav-bar'); if (scrollTop > threshold) { navBar.css('background-color', '#ffffff'); navBar.css('color', '#000000'); } else { navBar.css('background-color', 'transparent'); navBar.css('color', '#ffffff'); } }, onPageScroll(e) { this.onScroll(e); }, onReachBottom() { // 页面滚动到底部的时候触发加载更多 } } </script> <style> /* 这里是页面样式 */ </style> ``` 在上述代码中，通过监听页面滚动事件`onPageScroll`和调用`onScroll`方法来实现改变导航栏样式的效果。根据滚动距离设置导航栏的背景颜色，当滚动距离超过阈值时，将导航栏背景颜色设为白色，否则设为透明。请注意，需要将`.nav-bar`替换为你实际使用的顶部导航栏的class或id。 这样就可以实现滚动页面时顶部导航栏的透明变白色的效果了。希望能对你有所帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值