Vue无限加载组件@infinite方法页面加载时递归触发问题排查

可能的原因 #

• 滚动容器识别错误：vue-infinite-loading默认监听父级容器的滚动，但v-tab-item的容器可能初始高度不足，或者组件没正确绑定到body滚动，导致组件误判已经滚动到底部，持续触发加载。
• v-tab-item隐藏状态的渲染问题：未激活的v-tab-item通常处于隐藏状态（display: none），组件初始化时无法正确计算滚动容器的尺寸和位置，触发条件始终满足，从而递归调用加载方法。
• 初始内容高度不足：页面加载时列表内容高度小于视口高度，组件认为已经滚动到阈值位置，不断触发加载逻辑。

解决办法 #

1. 强制绑定body作为滚动目标
   给infinite-loading组件添加scroll-target属性，明确指定监听body的滚动：

   <infinite-loading 
     direction="bottom" 
     @infinite="handleInfiniteLoader"
     scroll-target="body"
   >
     <div slot="no-more"></div>
     <div slot="no-results"></div>
   </infinite-loading>
   

2. 延迟渲染组件（针对tab切换场景）
   利用v-if控制组件仅在当前tab激活时渲染，避免隐藏状态下的错误计算：

   <v-tab-item v-model="activeTab" value="target-tab">
     <!-- 其他内容 -->
     <infinite-loading 
       v-if="activeTab === 'target-tab'"
       direction="bottom" 
       @infinite="handleInfiniteLoader"
       scroll-target="body"
     >
       <div slot="no-more"></div>
       <div slot="no-results"></div>
     </infinite-loading>
   </v-tab-item>
   

3. 调整触发阈值
   通过distance属性增大触发加载的距离阈值，避免初始状态下误触发：

   <infinite-loading 
     direction="bottom" 
     @infinite="handleInfiniteLoader"
     scroll-target="body"
     distance="100"
   >
     <div slot="no-more"></div>
     <div slot="no-results"></div>
   </infinite-loading>
   

内容的提问来源于stack exchange，提问作者papryk