具有两列的离子无限滚动答案

【问题标题】：Ionic Infinite scroll with two columns具有两列的离子无限滚动
【发布时间】：2017-06-26 06:29:37
【问题描述】：

我在使用 Ionic (1.3.1) 和 ion-infinite-scroll 时遇到问题。我有两列，一列在右侧，高度可变，另一列在左侧，无限滚动，但两个项目应该同时滚动。我遇到的问题是，当右栏太大时，在这种情况下，我必须向下滚动到页面底部才能在左侧有更多项目。

<div class="row" >

    <div class="col col-50">
        <ion-list>
            <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}">
                Item {{ item.id }}
            </ion-item>
        </ion-list>
        <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%" style="height:100%;"></ion-infinite-scroll>
     </div>

     <div class="col col-50">
         Very large column with variable height
     </div>
 </div>

我创建了一个显示问题的代码笔：

http://codepen.io/charlieme/pen/ybPBbQ

我的预期结果是同时滚动两个项目，但总是在左侧有项目，而不必滚动到页面底部。

提前致谢。

【问题讨论】：

标签： javascript ionic-framework infinite-scroll

【解决方案1】：

我为解决这个问题所做的是为右列中的项目放置一个延迟加载组件，我将元素隐藏在视口下方，因此页面底部将始终显示在屏幕上，允许用户使用无限滚动而不滚动右栏中的所有项目。

【讨论】：