Ionic 5水平滚动无限加载失效：loadMore仅触发一次

问题根源 #

1. ion-infinite-scroll被嵌套在ion-list内部，而ion-list是flex水平布局，导致无限滚动组件的触发区域无法被水平滚动容器正确识别。
2. 未处理“无更多数据”的逻辑，即使没有新数据加载，组件仍可能处于可触发状态，但实际不会再加载内容，造成仅触发一次的假象。

修复步骤 #

1. 调整组件结构 #

将ion-infinite-scroll从ion-list中移出，放在ion-content内与ion-list同级，确保水平滚动容器能正确检测到无限滚动的触发区域：

<ion-row class="PostContent">
  <ion-content class="fileRow" *ngIf="listCmtFichiers.length !== 0" scrollX="true" scrollY="false">
    <ion-list class="horizontal-list">
      <app-fichier *ngFor="let cmtFichier of listCmtFichiers; let i = index"
        [indexOfFichier]="i" [comment]="cmtFichier" [image]="cmtFichier.image" 
        [filedoc]="cmtFichier.fileDoc" [downloaded]="cmtFichier.downloaded" [inPost]="true">
      </app-fichier>
    </ion-list>

    <!-- 移到ion-list外部，与ion-list同级 -->
    <ion-infinite-scroll (ionInfinite)="loadMore($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
</ion-row>

2. 优化CSS样式 #

确保ion-infinite-scroll在水平布局中正确显示，调整horizontal-list和fileRow的样式，避免挤压无限滚动组件：

.PostContent {
  margin-left: 50px;
  margin-right: 10px;
}

.fileRow {
  height: 90px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: row;
}

.horizontal-list {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px; /* 可选：添加元素间距 */
}

/* 确保无限滚动组件在水平方向排列 */
ion-infinite-scroll {
  flex-shrink: 0;
  margin-left: 8px;
}

3. 完善TypeScript逻辑 #

添加“是否还有更多数据”的判断，加载完成后根据返回结果禁用无限滚动，同时确保异步操作的稳定性：

// 新增变量，标记是否还有更多数据
hasMoreData = true;

loadMore(event){
  if (!this.hasMoreData) {
    event.target.complete();
    return;
  }

  if(isDevMode()){
    console.log(' Load more before  X ' + this.X);
  }
  this.X++;
  if(isDevMode()){
    console.log('Load more after X ' + this.X);
  }

  this.commentManager.getArrayCommentsFiles(this.X,this.post.id)
    .then(newFiles => {
      // 判断返回的新数据是否为空，为空则标记无更多数据
      if (newFiles.length === 0) {
        this.hasMoreData = false;
        event.target.disabled = true; // 禁用无限滚动
      } else {
        this.listCmtFichiers.push(...newFiles);
      }
      event.target.complete();
    })
    .catch(err => {
      console.log("error ngOnInit Post component wall async "+JSON.stringify(err));
      event.target.complete(); // 即使出错也要完成事件，避免加载状态一直显示
    });
}

额外注意事项 #

• 确保getArrayCommentsFiles方法在没有更多数据时返回空数组，这样才能正确触发“无更多数据”的逻辑。
• 测试时可以手动调整X的值，模拟无数据的场景，验证无限滚动是否会被禁用。

内容的提问来源于stack exchange，提问作者Réda Youssoufi