离子无限滚动在水平和垂直滚动时不起作用

Question

我正在开发一个具有水平滚动页面的离子应用程序。我想将离子无限滚动用于垂直和水平滚动，但它现在仅适用于水平滚动。

如果我可以在同一页面中同时进行水平滚动和垂直滚动的无限滚动，任何人都可以接受吗？

<div>
            <ion-scroll direction="x" class="con-scroll-x" has-bouncing="true">
                <div class="scroll-div">
                    <div class="scroll-div-item" ng-repeat="trips in globalPlaces.result_trip_search">
                        <img  alt="title"   src="img/list-img/1.jpg" />
                        <div class="scroll-item-caption">
                            <div class="caption-rect">
                                <img  alt="title"   src="img/ic_hiker.png" />
                                <span>{{ trips.count_ratio }}</span>                            
                            </div>
                            <div class="scroll-caption-text">
                                <p>Viaje a:</p>
                                <h3 class="title-break">{{ trips.end_city }}</h3>
                            </div>
                            <div class="scroll-caption-date">
                                <span>{{ trips.start_date }}</span> <img  alt="title"   src="img/ic_date.png" /> <span>{{ trips.end_date }}</span>
                            </div>
                        <div class="comm-user-img">
                            <!-- scroll-cap-user-pics  -->
                                <!--<img  scroll-cap-user-pics alt="title" src="img/list_user1.png" />-->
                                <img  alt="title" src="{{ trips.profile_photo }}" class="comm-global-user-img" />
                            </div>
                        </div>
                    </div>
                </div>
            </ion-scroll>
        </div>

当我垂直滚动时，上面的代码在无限滚动中产生了一些问题。它在水平方向上效果很好。

Answer 1

实际上是ionic 中的know bug，就像当您在同一页面中拥有ion-scroll 和ion-infinite-scroll 时，ionic 无法触发无限负载。

可能的解决方案

将ion-scroll 包裹在DIV 中，并将ng-if 添加到DIV 并在您的控制器中将ng-if 模型设置为true。

示例

HTML

<div ng-if="PleaseShowMe">
    <ion-scroll direction="x" class="con-scroll-x" has-bouncing="true">
    <---other code--->
    </ion-scroll>
</div>

控制器

$timeout(function()
{
    $scope.PleaseShowMe = true;
},50);

注意：即使这样你也不能实现水平滚动，但你可以在垂直滚动时做到这一点，你可以将数据附加到水平滚动。