两列离子无限滚动

Question

我在使用 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

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

提前致谢。

Answer 1

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

两列离子无限滚动

Ionic Infinite scroll with two columns

javascript

infinite-scroll

ionic-framework