uniapp小程序触底加载不生效

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

#uni-app #小程序

什么是触底加载

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

触底加载怎么写

开启触底加载

首先需要开启本页面的触底，即在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 1449
在使用 uniapp + Vue3 开发项目时，可能会遇到事件不触发的问题，明明已经配置了pages.json，但就是没有效果。今天就来分析一下可能的原因，并给出解决方案。
uniapp [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！
🏆 前端领域优质创作者
10-07 4512
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是
【uniapp】触底加载事件 onReachBottom 不生效
花间半盘棋
11-22 2229
是不是用了局部滚动 ；检查 css 是不是写了。
uni-app无法触发onReachBottom触底事件的解决方案
Esther_liew的博客
11-28 8295
uni-app在开发小程序时，无法触发onReachBottom触底函数，排除了页面配置/容器高度等问题，发现是容器设置了定位
子组件内直接使用 `onReachBottom` 不生效
最新发布
热爱编码，享受创造
10-30 379
摘要：Vue2子组件中onReachBottom不生效的原因是它是页面级钩子。解决方案：父组件通过onReachBottom监听触底事件，传递reachBottom属性给子组件；子组件通过watch监听属性变化执行加载，完成后用$emit通知父组件重置状态。需注意页面滚动条件和uni-app可能的兼容性问题，如内容高度不足或局部滚动干扰。核心思路是利用父子通信间接实现触底监听功能。
uniapp scroll-view scrolltolower触底事件有时候不触发的问题
ZGG的博客
02-24 3160
出现触底不触发加载需要上拉在下拉才触发的问题
Uniapp当中的scroll-view滚动条不出现或者触底刷新事件不触发
学习记录
03-13 3150
检查容器高度是否有效设置审查全局 CSS 是否覆盖滚动条样式验证子元素布局是否符合滚动方向要求分平台调试并添加兼容性代码通过上述方案，可覆盖 90% 的滚动条异常场景。具体实现需结合业务逻辑调整（如动态高度计算或分页加载优化）。
uniapp 页面跳转后触底函数onReachBottom失效
Dawn_cl的博客
04-13 747
最近在uniapp项目中碰到一个问题，列表分页后需要在onReachBottom中进行触底加载更多，后来发现在触底加载后跳到别的页面再返回后，会有触底函数失效的情况，后来经过排查，发现是因为跳转时使用的是uni.navigateTo跳转，会保留当前页面，改成uni.redirectTo跳转后就好了。
学习：uniapp全栈微信小程序vue3后台（16）
Nan_Shu_614的博客
09-12 2087
deep():deep()是 Vue 3 中用于的特殊选择器，主要用于解决无法直接作用于子组件内部元素的问题。scopedscoped按钮样式完善组件DayItem。
uniapp项目之小兔鲜儿小程序商城(五) 登录页的实现,会员中心页的实现,设置页的实现,会员信息页的实现
GAARA
06-21 449
本文摘要：微信小程序登录页实现方案解析。文章介绍了如何利用微信开放能力获取用户信息，通过wx.login获取code参数，并结合button组件获取encryptedData和iv参数完成登录请求。详细展示了login.vue页面的静态布局，包括样式设计和结构搭建。重点讲解了小程序获取手机号的特殊机制，必须通过用户主动点击授权按钮才能获取加密信息。还提供了api接口封装和类型定义的方法，以及页面调用时获取code参数的具体实现。整个登录流程符合微信安全规范，实现了无需填写用户名密码的一键登录功能。
Uniapp 页面开发实战教程：导航栏配置、下拉刷新与上拉加载
xkxnq的专栏
09-02 480
在中配置全局/页面级导航栏： 核心参数说明：步骤1：开启配置 步骤2：页面逻辑处理 自定义样式： 步骤1：监听页面滚动事件 步骤2：优化加载提示 下拉刷新不生效：上拉加载多次触发：导航栏样式异常：
uniapp页面不能触发onReachBottom事件
weixin_61728046的博客
10-27 5276
uniapp页面不能触发onReachBottom事件
uni-app 微信小程序 onReachBottom 不生效
xiamoziqian的博客
06-28 2691
uni-app 微信小程序，页面滑到底部，onReachBottom 没有生效
uniapp 使用scroll-view @swiperScrollLower触底加载的事件无效
qq_42966789的博客
09-16 1640
问题 打包成app h5 在ios h5上触底加载都是好的，但是在android 触底加载不行，不管是使用onReachBottom ，还是scroll-view 的@swiperScrollLower均无效， 问题分析 有可能是页面上会多个滚动条以至于android识别不了是哪个滚动到底部实现加载， 当使用scroll-view 的@swiperScrollLower 的时候 onReachBottom触底加载是无效的 解决 给scroll-view 添加上一个动态的高度，其实我也写了高度为100%
uniapp 真机调试onReachBottom不生效
Motion_zq的博客
09-16 852
uniapp 真机调试onReachBottom不生效
解决uniapp scroll-view 触底事件 @scrolltolower失效
weixin_70394181的博客
08-07 1368
解决方法：给scroll-view增加合适的高度。失效原因：scroll-view没有设置高度。1.给添加动态样式。2.scipt里设置高度。
uniapp中内置组件scroll-view关于上拉触底无法触发。
qq_48692433的博客
06-16 698
当时数据是从接口请求过来的，因为盒子被内容高度撑开，所以并没有给scroll-view设置高度，同时也绑定了scrolltolower，触底函数就一直没有触发，找了半天问题，结果还是因为没有设置高度而无法触发。
微信小程序、uniapp触底事件不触发原因
weixin_55798503的博客
09-14 1391
微信小程序、uniapp触底事件不触发原因。
uni-app中 scroll-view组件 滑动事件不生效问题?
weixin_45344910的博客
05-25 1465
uni-app中 scroll-view组件 滑动事件不生效问题?
uniapp开发微信小程序触底加载更多
03-21
### 如何在 UniApp 中实现微信小程序触底加载更多功能 要在 UniApp 中实现微信小程序的触底加载更多功能，可以按照以下方式设计逻辑结构并编写代码： #### 1. 数据初始化与页面配置 首先，在 `data` 函数中定义必要的变量来存储当前页码、每页数据量以及总数据状态。 ```javascript export default { data() { return { page: 1, // 当前页码 pageSize: 15, // 每页数据条数 listData: [], // 存储获取到的数据 hasMore: true, // 是否还有更多数据 loadingText: '上拉加载', // 默认提示文字 }; }, }; ``` #### 2. 页面滚动监听事件 通过绑定 `onReachBottom` 方法监听页面触底事件。每次触发该方法时，调用接口加载下一页数据，并更新 UI 和状态。 ```javascript methods: { async loadMoreData() { if (!this.hasMore) return; this.loadingText = '正在加载...'; // 修改提示语 try { const res = await this.fetchData(this.page + 1); // 调用接口获取新数据 if (res.length === 0 || res.length < this.pageSize) { this.hasMore = false; // 如果返回数据不足或为空，则无更多数据 this.loadingText = '没有更多'; } else { this.listData.push(...res); // 将新数据追加至已有数据数组 this.page += 1; // 更新页码 this.loadingText = '上拉加载'; // 还原默认提示语 } } catch (error) { console.error('加载失败:', error); this.loadingText = '加载失败，请重试'; } }, fetchData(page) { // 模拟异步请求接口 return new Promise((resolve) => { setTimeout(() => { resolve(Array.from({ length: Math.random() * 10 }, (_, i) => ({ id: `${page}-${i}`, name: `商品 ${page}-${i}` }))); }, 1000); }); } }, // 监听页面触底事件 onReachBottom() { this.loadMoreData(); // 触发加载更多逻辑 } ``` 上述代码实现了分页加载的核心逻辑[^3]。每当用户滚动到底部时，会自动尝试加载下一页的内容。如果服务器返回的数据不足以填满整个页面大小或者没有任何数据返回，则停止继续加载。 #### 3. 渲染视图层 最后，在模板文件中展示已有的数据列表，并动态调整底部提示信息的状态。 ```html <template> <view class="container"> <!-- 商品列表 --> <block v-for="(item, index) in listData" :key="index"> <text>{{ item.name }}</text> </block> <!-- 底部加载提示 --> <view class="loading-tip">{{ loadingText }}</view> </view> </template> <style scoped> .container { padding: 20px; } .loading-tip { text-align: center; margin-top: 20px; color: gray; } </style> ``` 以上即为完整的 UniApp 微信小程序触底加载更多功能的实现方案。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值