本文主要是介绍uni-app 上拉加载函数 onReachBottom 不触发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
记一次问题解决记录。
问题：uni-app 上拉加载函数不触发。
首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true，且配置正确。
{"path": "pages/list/list","style": {"enablePullDownRefresh": true}
},查资料之后，有一种说法是 onReachBottomDistance 这个值的设置太小，会导致不触发函数，建议设置为 150。onReachBottomDistance 官网的解释是：页面上拉触底事件触发时距页面底部距离。
"globalStyle": {"navigationStyle": "custom","backgroundColor": "#f2f2f2","onReachBottomDistance": 150
},可是配置之后，依然没有解决问题。
仔细思考后，问了自己一个问题，我的页面是否真的发生了滚动。检查代码发现，症结果然在此。
项目搭建初期，我封装了一个页面布局组件，用来统一管理页面布局。组件非常简单，将页面分为了 header 和 body 两部分。
<template><view><m-header class="m-header"></m-header><view class="m-body"><slot></slot></view></view>
</template>样式设置如下：
.m-body{box-sizing: border-box;position: absolute;overflow-y: auto;left: 0;right:0;top:0;bottom:0;z-index: 0;background: #f2f2f2
}
.m-header ~ .m-body{top: 44px
}问题就出在 m-body 样式的设置上。可以看出，通过设置 position：absolute，并且 top，bottom，left，right 都设置为零时，可以让页面平铺整个页面，所有的内容都是在 m-body 里做展示，即使里边的内容出现滚动，也是在 m-body 里边滚动，m-body 本身并没有发生任何滚动，所以不能触发上拉加载函数。
解决方案：
.m-body{box-sizing: border-box;min-height: 100vh;background: #f2f2f2
}
.m-header ~ .m-body{padding-top: 44px;
}至此，问题解决。
这篇关于uni-app 上拉加载函数 onReachBottom 不触发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
