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;
}

至此，问题解决。