uniapp onReachBottom 不触发

已于 2022-03-05 18:21:23 修改
阅读量5.7k 收藏 4
点赞数 8
分类专栏： uniapp 文章标签： 前端
于 2021-09-09 12:03:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55552785/article/details/120198074
版权

官网

如果你在使用 onReachBottom 的时候没有触发，就看看那个页面有没有出现滚动条，没有就不会触发

因为 view 没有高度（百分百也不行），然后就调用不到 onReachBottom 这个钩子

page {
		height: initial;
		overflow-y: initial;
		min-height: 100vh;
	}

其实配不配置 onReachBottomDistance 都没关系的（个人觉得）

initial 关键字用于设置 CSS 属性为它的默认值

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性

initial

我我在线睡觉
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
uniapp数独小游戏
09-22
4. **事件处理**：uniapp提供事件监听和处理机制，用户点击单元格时，会触发相应的事件，更新单元格状态，并检查整个游戏的正确性。 5. **逻辑验证**：在数独游戏中，每次填入数字后，都需要进行合法性验证，确保...
uniapp虚拟列表示例demo
最新发布
06-26
此外，为了保证平滑的滚动体验，还需要设置合适的`refreshDelay`和`loadingDelay`属性，控制下拉刷新和上拉加载的时机，避免频繁触发数据请求。同时，可以利用`sticky`属性实现吸顶效果，使顶部元素在滚动时固定在...
onReachBottom没有触发？填坑之路
轻量开发
04-17 2067
最近搞微信小程序，遇到onReachBottom没有触发的问题。其他页面滑动到底部能触发onReachBottom。但是新搞的页面怎么设置都不行。百度各种方法都用上了。最后，我还是从引入组件排查。发现用<scroll-view/>就不会触发onReachBottom。经过查看api,发现此控件有自带的触发回调，bindscrolltolower就是触发底部回调的。
uni-app无法触发onReachBottom触底事件的解决方案
Esther_liew的博客
11-28 4805
uni-app在开发小程序时，无法触发onReachBottom触底函数，排除了页面配置/容器高度等问题，发现是容器设置了定位
uniapp页面vue3下拉触底发送获取新数据请求实现分页功能
05-27 697
页面下拉触底获取新数据实现分页功能实现方式有两种，根据自己的业务需求来定，不同的方案适用场景不一样，有的是一整个页面下拉获取新数据，有的是部分盒子内容滚动到底部时候实现获取新数据，下面讨论一下两种方式的区别。
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; }
uniapp页面不能触发onReachBottom事件
weixin_61728046的博客
10-27 4549
uniapp页面不能触发onReachBottom事件
uniapp项目中的上拉触底事件
weixin_72503508的博客
03-21 2782
1.1 在项目中的 pages.json 文件找到自己要做 上拉触底事件的页面配置 onReachBottomDistance。1.3 在获取数据的函数中 获取到数据之后不要立即赋值，要将之前的数据与下拉触底获取到的数据合并。通过公式：（页码数 * 每一页获取数据的条数 >= 总条数）如果符合则说明已经没有数据了。注意：不适合粘贴复制，只是怕大家看前面的关键代码段看的云里雾里，所以贴出完整代码以作对比。三、判断数据是否请求完成，如果请求完成就不应该继续发起请求了。3.1 在上拉触底事件中做判断。
小程序onReachBottom上拉触底/下拉刷新没有反应问题（日常踩坑）
pirs123的博客
07-11 2274
今天踩了一个坑，因为改之前同事写的页面，新功能需要用到上拉刷新获取更多数据，当我加上onReachBottom时不管怎么上拉都没有效果后来发现给了整个页面固定高度，这就导致onReachBottom不触发了，其实还有很多导致onReachBottom不触发的，比如使用scroll-view处理不当也会导致onReachBottom不执行。虽然onReachBottom是自带的方法但是一定要写在methods里面才会触发的噢。下面是去掉固定高度的效果，触发了！
onReachBottom不生效的原因（再骂自己一次）
weixin_53465412的博客
03-15 3539
onReachBottom和onPageScroll不生效，和普罗大众不一样的错法（55555555）
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Uniapp 各类 button按钮
09-12
在移动应用开发中，按钮（Button）是用户界面不可或缺的元素，它承载着用户的操作行为，如点击提交、打开新页面、执行特定功能等。在 UniApp 开发框架中，Button 组件扮演着同样的角色，提供了丰富的样式和交互功能...
uniapp subNvue 写的视频播放
11-03
- `onReady`：当视频组件渲染完成后触发，可以在此时进行预加载操作。 - `onUnload`：组件销毁时执行，可用来释放资源，如停止视频播放。 5. **自定义事件和通信** uniapp提供了`$emit`、`$on`以及`$off`等事件...
【微信小程序页面出现onReachBottom不触发的情况】
没落的博客
03-06 1451
无法触发的原因是：height设置为100vh,会导致滑动不会触底。修改一下css就会触发。
uniapp子组件onReachBottom、onPageScroll不触发
weixin_44294359的博客
01-18 1533
uniapp子组件onReachBottom不触发
uniapp 页面跳转后触底函数onReachBottom失效
Dawn_cl的博客
04-13 526
最近在uniapp项目中碰到一个问题，列表分页后需要在onReachBottom中进行触底加载更多，后来发现在触底加载后跳到别的页面再返回后，会有触底函数失效的情况，后来经过排查，发现是因为跳转时使用的是uni.navigateTo跳转，会保留当前页面，改成uni.redirectTo跳转后就好了。
uniapp触底加载
waterwo的博客
03-15 9553
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、onReachBottom()函数首先，在page.json的style下设置然后在页面使用即可，与生命周期函数同一级别二、在子组件中使用滚动区域scrow-view触底加载1.添加scroll-view组件2.设置height3.在methods方法中写入触底加载的业务逻辑 一、onReachBottom()函数 首先，在page.json的style下设置 "pages": [ { "path": "page.
uniapp onReachBottom不触发
qq_41687724的博客
02-24 7020
在子组件里是不会触发的 要写在父组件中 父组件中这样写： <goods ref="goods"></goods> onReachBottom(){ console.log('onReachBottom1111111111'); if(this.$refs.goods){ if(this.$refs.goods.status === 'loadmore') { this.$refs.goods.getNoSaleList(); } } }
小程序onreachbottom不执行
热门推荐
为啥不能换名字的博客
08-20 2万+
今天写一个列表页遇到一个问题  不管我怎么加载更多就是不触发onreachbottom这个触底事件 先说说页面布局吧 上边筛选条件定位的下边合计定位的 我中间列表 .list-box{ width:100%; height:80%; overflow-y:scroll; position:absolute; top:110rpx; } 解决方法：因为一句样式问题 去掉hei...
onreachbottom不触发
08-16
在使用onReachBottom函数时，可能会出现一些问题导致该函数不触发。首先，当给最外层view设置了overflow样式后，onReachBottom钩子将不会触发。解决方法是去除overflow样式。另外，如果底部没有预留足够的高度供滑动，也会导致onReachBottom不触发。解决方法是在底部添加一个空的view并设置合适的高度。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp 解决onReachBottom失效](https://blog.csdn.net/qq_43351090/article/details/120885192)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [onReachBottom无法触发也不报错](https://blog.csdn.net/qq_55928824/article/details/124458290)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [微信小程序上拉触底事件函数onReachBottom不触发的解决方案](https://blog.csdn.net/wohenshenmi/article/details/128372428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值