uniapp 页面跳转后触底函数onReachBottom失效

最新推荐文章于 2025-10-30 11:27:22 发布
原创 最新推荐文章于 2025-10-30 11:27:22 发布 · 750 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端

在uniapp项目中遇到列表分页问题，当使用onReachBottom事件加载更多内容后，通过uni.navigateTo跳转页面再返回，会导致触底加载功能失效。解决方法是改用uni.redirectTo进行跳转，因为后者不会保留当前页面状态，从而避免了问题的发生。

最近在uniapp项目中碰到一个问题，列表分页后需要在onReachBottom中进行触底加载更多，后来发现在触底加载后跳到别的页面再返回后，会有触底函数失效的情况，后来经过排查，发现是因为跳转时使用的是uni.navigateTo跳转，会保留当前页面，改成uni.redirectTo跳转后就好了

Dawn~cl
关注
关于uniapp+vue3中onReachBottom不生效的问题! 记录一下排查过程
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-22 1472
在使用 uniapp + Vue3 开发项目时，可能会遇到事件不触发的问题，明明已经配置了pages.json，但就是没有效果。今天就来分析一下可能的原因，并给出解决方案。
uniapp [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！
🏆 前端领域优质创作者
10-07 4520
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是
子组件内直接使用 `onReachBottom` 不生效
最新发布
热爱编码，享受创造
10-30 397
摘要：Vue2子组件中onReachBottom不生效的原因是它是页面级钩子。解决方案：父组件通过onReachBottom监听触底事件，传递reachBottom属性给子组件；子组件通过watch监听属性变化执行加载，完成后用$emit通知父组件重置状态。需注意页面滚动条件和uni-app可能的兼容性问题，如内容高度不足或局部滚动干扰。核心思路是利用父子通信间接实现触底监听功能。
【uniapp，触底加载，下拉刷新】【h5】滚动区域滚动触发触底加载 scroll-view
AAAXiaoApple的博客
02-20 4388
【代码】【uniapp】【h5】滚动区域滚动触发触底加载 scroll-view。
uni-app无法触发onReachBottom触底事件的解决方案
Esther_liew的博客
11-28 8328
uni-app在开发小程序时，无法触发onReachBottom触底函数，排除了页面配置/容器高度等问题，发现是容器设置了定位
uniapp 解决onReachBottom失效
热门推荐
qq_43351090的博客
10-21 1万+
一、为什么失效？ 当给最外层view（container）设置overflow样式后，onReachBottom钩子不触发，去除overflow后，可触发，但存在某些样式问题。 .container{ height: 100vh; background-color: #F5F6FA; overflow: scroll; } 二、解决方案 1.去除overflow，直接修改page样式 page{ height: 100vh; background-color: #F5F6FA; }
uni-app学习--基础组件使用、页面生命周期、本地存储、网络请求、条件编译、路由跳转
ChenLingZhi1115的博客
06-05 1728
uni-app提供了丰富的基础组件给开发者，开发者可以像搭建积木一样，组合各种组件拼接成自己的应用 uni-app中的组件，就像html中的div,p,span等标签的作用一样，用于搭建页面的基础结构 https://uniapp.dcloud.net.cn/component•text组件相当于行内标签，在同一行显示(相当于span标签) •除了文本节点以外的其他节点都无法长按选中 • 组件内只支持嵌套 ，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。但text嵌套text在小程序中布局是有
uniapp 面试题总结常考
zhzijun的博客
11-12 1011
【代码】uniapp 面试题总结常考。
【微信小程序】微信小程序返回上一个页面的同时刷新数据，专业术语：小程序跨页面通信
疾术客
11-21 2553
话不多说，代码奉上！ var pages = getCurrentPages(); //获取页面栈 var prevPage = pages[pages.length - 2]; //获取当前页面的上一个页面 prevPage.onLoad(prevPage.options) //调用上一个页面的onload 来实现刷新数据 注：此方法有点，方便、快捷、无感刷新数据；弊端在于有点浪费资源...
微信小程序实现微信APP上的扫一扫扫码跳到小程序对应的结果页面和签字等功能
qq_37635012的博客
02-20 4560
最近做了一个小程序项目，这个小程序是搭配APP端使用的，大概需求是这样的，用户用微信的扫一扫或小程序首页的扫一扫都可以实现对APP上的二维码进行扫码识别，识别成功之后跳到页面进行渲染，然后用户可以对其签字和编辑提交等。当用户扫码成功后会跳到一个临时页面temporary.wxml，这个页面作为一个中转页面，主要是为了当用户从微信的扫一扫进来时也是先进这个中转页面再到结果页面，相当于从微信的扫一扫进来时不用到小程序的扫一扫里再授权什么的。
微信小程序豆瓣与新闻列表Demo源码
这通过wx.navigateTo或wx.redirectTo等路由API实现，支持携带参数（如id）传递给目标页面，并在目标页面通过onLoad生命周期函数接收参数后再发起新的数据请求。这种页面间通信机制是构建多页面小程序的基础。 在UI...
uni-app 微信小程序 onReachBottom 不生效
xiamoziqian的博客
06-28 2699
uni-app 微信小程序，页面滑到底部，onReachBottom 没有生效
uniapp onReachBottom不起效
weixin_52268321的博客
04-27 365
由于使用了整个列表使用了 swiper 组件。
【uniapp】触底加载事件 onReachBottom 不生效
花间半盘棋
11-22 2241
是不是用了局部滚动 ；检查 css 是不是写了。
uni-app中生命周期函数onReachBottom无法触发
weixin_50517811的博客
11-01 1672
当页面展示高度小于等于屏幕高度时，触发不了onReachBottom，只需设置页面展示高度稍微大于屏幕高度时，在滑动触底时即可触发该函数。问题描述：uni-app中生命周期函数onReachBottom无法触发。
uni-app，实现上拉分页onReachBottom不生效问题
简单Cere
03-10 800
uniapp滚动刷新不生效
uniapp子组件onReachBottom、onPageScroll不触发
weixin_44294359的博客
01-18 4769
uniapp子组件onReachBottom、onPageScroll不触发
uniapp页面不能触发onReachBottom事件
weixin_61728046的博客
10-27 5293
uniapp页面不能触发onReachBottom事件
uniapp onReachBottom 无效
qq_42339350的博客
07-13 1775
两个可能 1 scroll-view 是不能触发的，scroll-view自己有对应的方法监听触底 2 设置了 overflow-y: scroll; ，也是没法触发的
uniapp页面跳转传参数
09-14
在uniapp中，可以通过URL参数来进行页面跳转传递参数。一种常用的方法是使用uni.navigateTo函数，其中的url参数可以包含需要传递的数据。例如，可以使用以下代码进行页面跳转传参： ```javascript uni.navigateTo({...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值