Ionic单视图下实现多个Infinite Scroll无限滚动的解决方案问询

可行方案：单视图内用局部滚动容器实现，无需拆分多视图 #

核心冲突是嵌套ion-content导致的滚动事件冲突，官方要求单视图仅保留一个根ion-content，可以用以下方案实现多列表独立无限滚动：

• 替换嵌套的ion-content为ion-scroll组件：ion-scroll是Ionic提供的轻量局部滚动容器，不会和根滚动容器冲突，每个列表对应一个独立的ion-scroll作为滚动载体
• 根ion-content设置scrollY=false，禁用全局滚动，避免和内部局部滚动容器的事件冲突
• 给每个ion-scroll设置固定高度，比如calc(100vh - 顶部导航高度)，保证滚动容器高度明确，ion-infinite-scroll可以正确识别滚动位置触发加载
• 每个ion-scroll内部单独绑定对应的ion-infinite-scroll组件，各个列表的加载逻辑完全独立互不影响

简化实现代码示例 #

<!-- 根Ion Content 全局唯一 -->
<ion-content [scrollY]="false">
  <ion-grid>
    <ion-row>
      <!-- 左侧列表区域 -->
      <ion-col size="6">
        <ion-scroll scrollY="true" class="custom-scroll-box">
          <ion-list>
            <ion-item *ngFor="let item of leftList">{{item.content}}</ion-item>
          </ion-list>
          <ion-infinite-scroll (ionInfinite)="loadLeftData($event)">
            <ion-infinite-scroll-content loadingText="加载中..."></ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </ion-scroll>
      </ion-col>
      <!-- 右侧列表区域 -->
      <ion-col size="6">
        <ion-scroll scrollY="true" class="custom-scroll-box">
          <ion-list>
            <ion-item *ngFor="let item of rightList">{{item.content}}</ion-item>
          </ion-list>
          <ion-infinite-scroll (ionInfinite)="loadRightData($event)">
            <ion-infinite-scroll-content loadingText="加载中..."></ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

.custom-scroll-box {
  /* 高度根据实际页面的头部、底部固定元素高度调整 */
  height: calc(100vh - 88px);
}

拆分多视图的适用场景 #

如果你的多个列表之间关联度极低，或者需要保留每个列表独立的页面操作状态（比如返回后保持滚动位置、独立的下拉刷新逻辑），可以选择用ion-segment或者ion-tabs切换不同视图，每个视图单独使用一个ion-content绑定无限滚动，实现成本更低，稳定性更高。

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