uni-app无法触发onReachBottom触底事件的解决方案

遇到的问题

• 背景：在使用uni-app开发小程序时，想要列表滚动到底部时，设置上拉加载。但页面滚动到底部时，无法触发onReachBottom函数
• 过程：排除了下文提到的（pages.json未配置，以及容器未设置高度）等问题后，也更换了方式，使用scroll-view标签进行包裹，发现仍无法解决
• 原因：最终发现是列表容器使用了绝对定位的问题（或固定定位也可能出现），导致容器脱离标准流，无法触底

  <style lang="scss" scoped>
  	.pageContainer {
  		width: 100%;
  		min-height: 100vh;
  		box-sizing: border-box;
  		overflow: scroll;
  		position: relative;  //错误位置
  		
  		.containerList {
  			position: absolute;  //错误位置
  			top: 120rpx;
  			left: 0;
  
          ......
          
              }
          }
  </style>

   

• 解决：可更换定位方式或者不使用定位布局（这里是直接不使用定位），最终解决，onReachBottom函数触发了

  <style lang="scss" scoped>
  	.pageContainer {
  		width: 100%;
  		min-height: 100vh;
  		box-sizing: border-box;
  		overflow: scroll;
  		// position: relative;  //删除定位样式
  		
  		.containerList {
  			// position: absolute;  //删除定位样式
  			margin-top: 120rpx;  //使用margin修改布局
  			left: 0;
          }
  	}
  </style>

排除以下造成不触发可能存在的原因

• 配置问题：在pages.json或者本页的json文件中配置了 onReachBottomDistance 属性

• 高度问题：确保设置了容器高度

  //设置容器高度为100%
  page{
    height: 100%
  }

• onReachBottom函数被覆盖：页面是否已经写过onReachBottom函数