uniapp小程序触底加载不生效

最新推荐文章于 2025-03-13 12:15:24 发布
最新推荐文章于 2025-03-13 12:15:24 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MsWRight/article/details/132332665

什么是触底加载

触底加载类似于分页，却又不同于传统的分页，他只有在用户上滑页面，并在页面距离底部一定距离时才会触发

触底加载怎么写

开启触底加载

首先需要开启本页面的触底，即在pages.json中找到想要开启触底的页面，在style中将enablePullDownRefresh设置为true，默认的触底距离是50px，如果你需要更改可以设置onReachBottomDistance，这个参数代表距离底部多远发生触底

{
	"path": "pages/shool/shool",
	"style": {
		"navigationBarTitleText": "",
		"enablePullDownRefresh": true,
        "onReachBottomDistance": 150
		}
}
触底加载事件

在页面中添加onReachBottom触底函数，跟onLoad平级。在onReachBottom中可以写自己的触底后的代码

触底加载不生效

首先你可以在页面通过生命周期onPageScroll来监听页面是否发生滚动，一般触底不生效都是因为页面其实并没有发生滚动
其次如果你使用了scroll-view，可以使用它自身的事件scrolltolower来判断是否触底

关于uniapp+vue3中onReachBottom不生效的问题! 记录一下排查过程
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-22 1029
在使用 uniapp + Vue3 开发项目时，可能会遇到事件不触发的问题，明明已经配置了pages.json，但就是没有效果。今天就来分析一下可能的原因，并给出解决方案。
uniapp [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！
资深程序员
10-07 4361
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是
uniapp scroll-view scrolltolower触底事件有时候不触发的问题
ZGG的博客
02-24 2958
出现触底不触发加载需要上拉在下拉才触发的问题
uni-app无法触发onReachBottom触底事件的解决方案
Esther_liew的博客
11-28 7954
uni-app在开发小程序时，无法触发onReachBottom触底函数，排除了页面配置/容器高度等问题，发现是容器设置了定位
【uniapp】触底加载事件 onReachBottom 不生效
花间半盘棋
11-22 2028
是不是用了局部滚动 ；检查 css 是不是写了。
uniapp 页面跳转后触底函数onReachBottom失效
Dawn_cl的博客
04-13 720
最近在uniapp项目中碰到一个问题，列表分页后需要在onReachBottom中进行触底加载更多，后来发现在触底加载后跳到别的页面再返回后，会有触底函数失效的情况，后来经过排查，发现是因为跳转时使用的是uni.navigateTo跳转，会保留当前页面，改成uni.redirectTo跳转后就好了。
uniapp页面不能触发onReachBottom事件
weixin_61728046的博客
10-27 5109
uniapp页面不能触发onReachBottom事件
微信小程序填坑之路（八）：下拉刷新动画没有动画效果的原因
李益
04-29 6368
下拉刷新与上拉加载的使用 下来刷新和上拉加载是一款应用中非常常用的两种功能，微信小程序直接提供了这两种功能，下面来看下如何使用。 先在页面的json文件中添加 "enablePullDownRefresh": true，表示开启下拉刷新与上拉加载功能。 然后在页面的js文件中实现onPullDownRefresh与onReachBottom方法 // 下拉刷新方法 onPullDow...
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 1111
微信小程序和uni-app面试高频知识点
小程序瀑布流布局（通用方法）
TP19981017的博客
03-18 1191
小程序完美实现类花瓣网小红书瀑布流布局 问题 做毕业设计需要用到瀑布流布局，看了网上的方法主要有以下两种，但基本都存在问题。 1、使用纯css样式排列出瀑布流布局 核心代码： 父元素：column-count: 2 子元素：break-inside: avoid 局限：只能一次性展示全部数据，不能做动态数据加载，数据显示位置会随数据加载而错位。 2、分成左右两列 根据单条数据索引的奇偶排列出瀑布流布局 核心代码： wx-if="{{index%2==0}}" 局限：当奇数列的元素高度大于或小于偶数列
uni-app 微信小程序 onReachBottom 不生效
xiamoziqian的博客
06-28 2607
uni-app 微信小程序，页面滑到底部，onReachBottom 没有生效
Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发
最新发布
学习记录
03-13 2485
检查容器高度是否有效设置审查全局 CSS 是否覆盖滚动条样式验证子元素布局是否符合滚动方向要求分平台调试并添加兼容性代码通过上述方案，可覆盖 90% 的滚动条异常场景。具体实现需结合业务逻辑调整（如动态高度计算或分页加载优化）。
uniapp 使用scroll-view @swiperScrollLower触底加载的事件无效
qq_42966789的博客
09-16 1588
问题 打包成app h5 在ios h5上触底加载都是好的，但是在android 触底加载不行，不管是使用onReachBottom ，还是scroll-view 的@swiperScrollLower均无效， 问题分析 有可能是页面上会多个滚动条以至于android识别不了是哪个滚动到底部实现加载， 当使用scroll-view 的@swiperScrollLower 的时候 onReachBottom触底加载是无效的 解决 给scroll-view 添加上一个动态的高度，其实我也写了高度为100%
uniapp 真机调试onReachBottom不生效
Motion_zq的博客
09-16 831
uniapp 真机调试onReachBottom不生效
解决uniapp scroll-view 触底事件 @scrolltolower失效
weixin_70394181的博客
08-07 1214
解决方法：给scroll-view增加合适的高度。失效原因：scroll-view没有设置高度。1.给添加动态样式。2.scipt里设置高度。
uniapp中内置组件scroll-view关于上拉触底无法触发。
qq_48692433的博客
06-16 643
当时数据是从接口请求过来的，因为盒子被内容高度撑开，所以并没有给scroll-view设置高度，同时也绑定了scrolltolower，触底函数就一直没有触发，找了半天问题，结果还是因为没有设置高度而无法触发。
微信小程序、uniapp触底事件不触发原因
weixin_55798503的博客
09-14 1329
微信小程序、uniapp触底事件不触发原因。
uni-app中 scroll-view组件 滑动事件不生效问题?
weixin_45344910的博客
05-25 1393
uni-app中 scroll-view组件 滑动事件不生效问题?
uniapp子组件onReachBottom、onPageScroll不触发
weixin_44294359的博客
01-18 4443
uniapp子组件onReachBottom、onPageScroll不触发
scroll-view 同时滚动 延迟
12-29
### 解决 Scroll-View 同时滚动时出现延迟的问题 #### 一、问题描述 在某些情况下，`scroll-view`组件在同时处理多个方向或多次连续滚动操作时可能会出现明显的延迟现象。特别是在Android设备上快速滑动时会出现卡顿或不流畅的情况[^1]。 #### 二、原因分析 这种延迟通常是由以下几个因素引起的： - **性能开销大**：当页面中有大量DOM节点或者复杂的布局结构时，在执行频繁的滚动事件监听器时会导致较大的渲染压力。 - **事件触发频率过高**：对于像滚动这样的交互行为，默认情况下浏览器会非常频繁地触发相应的JavaScript事件（如`onscroll`），这可能导致不必要的重复计算。 - **资源竞争**：如果应用程序在同一时间段内正在进行其他耗时的任务（例如网络请求、图片加载等），那么可用的CPU/GPU时间就会减少，从而影响到滚动体验的质量。 #### 三、解决方案 ##### 使用防抖和节流技术优化事件响应效率 为了避免因过高的事件触发频率而导致的性能瓶颈，可以采用防抖(debounce) 或者 节流(throttle) 的方式来控制函数调用次数，以此减轻系统的负载并提高用户体验[^4]。 ###### 实现示例 - 防抖 (Debouncing) 通过设定一定的时间间隔，在这段时间内只允许最后一次的操作生效，忽略之前的相同类型操作。 ```javascript function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); } } // 应用于 scroll 事件处理器中 const handleScroll = debounce(function(event){ console.log('Handling scroll...'); }, 200); // 设置等待时间为200毫秒 ``` ###### 实现示例 - 节流 (Throttling) 限定在一个固定周期内最多只能执行一次特定的功能，即使期间发生了更多次的相关动作也只会取其中的一次进行处理。 ```javascript function throttle(fn, threshhold) { var last, timer, context, args; return function() { context = this; args = arguments; const now = +new Date(); if (!last || now >= last + threshhold) { fn.apply(context, args); last = now; } else if(!timer){ timer = setTimeout(function(){ fn.apply(context,args); delete timer; },threshhold-(now-last)); } }; } // 应用于 scroll 事件处理器中 const throttledHandleScroll = throttle((event)=>{ console.log('Handling scroll with Throttle...'); },{/* 时间阈值 */}300); ``` ##### 减少 DOM 复杂度与优化样式表 确保页面内的HTML元素数量尽可能精简，并且CSS选择器应保持简单高效，避免过度嵌套的选择器定义。此外还可以考虑利用GPU加速特性来进行图形变换，比如使用 `translateZ(0)` 来强制开启硬件加速。 ##### 动态调整 ScrollView 属性 针对不同平台的特点做出适应性的配置修改。例如，在UniApp框架下开发的应用程序可以通过给定`scroll-top=0`的方式使得每次切换标签页时都能让右侧的内容区域能够重新定位至顶部位置[^2]；而对于微信小程序而言，则建议合理运用`bindscrolltolower`属性绑定触底加载更多的逻辑[^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值