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就是SVNSlackNotifier open-source utility，就像你在同一页面中ion-scroll和ion-infinite-scroll一样离子无法激发无限负荷。

可能的解决方案

将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);

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

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

1 个答案: