离子无限滚动在离子滚动中不起作用答案

【问题标题】：ion-infinite-scroll not working inside ion-scroll离子无限滚动在离子滚动中不起作用
【发布时间】：2017-12-29 08:29:56
【问题描述】：

我正在尝试在页面的一半部分实现加载更多功能。所以我将该代码放在离子滚动中，但不知何故当前的实现不起作用，例如方法是

(ionInfinite)="doInfinite($event)"

未触发且加载程序 UI 未呈现。但是，如果将内容放在 ion-content 而不是 ion-scroll 中，则相同的实现是有效的。

<ion-content padding>
<ion-scroll scrollY="true" id="accountList" class="list-box">
        <ion-list >
          <ion-item *ngFor="let item of [1,2,3,4,5,6,7,8,9]">
            <ion-icon ios="ios-add-circle" md="ios-add-circle" item-start color="secondary"></ion-icon>
              Item1
            <ion-buttons item-end>
                  <button ion-button clear icon-only color="orange">
                     <ion-icon ios="md-create" md="md-create" item-end ></ion-icon>
                  </button>
                  <button ion-button clear icon-only color="danger">
                     <ion-icon ios="md-close" md="md-close" item-end></ion-icon>
                  </button>
            </ion-buttons>
          </ion-item>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content
              loadingSpinner="bubbles"
              loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
    </ion-scroll>
</ion-content>

【问题讨论】：

标签： html ionic3 ion-scroll ion-infinite-scroll

【解决方案1】：

对不起，我的英语不好，但我使用以下代码解决了这个问题：

<ion-scroll #scrollWeb scrollY="true" class="scroll-y">
    <ion-grid>
        <ion-row>
            <ion-col col-4 col-sm-6 col-md-4 col-lg-4 col-xl-4 *ngFor="let item of items">
                <item-card [item]="item"></item-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-scroll>

在我的组件上：

@ViewChild('scrollWeb') scrollWeb: Scroll;

在DOM元素上添加监听器，以发现滚动是否到达末尾，如下所示：

ngAfterViewInit() {   
    if (this.scrollWeb) {
        this.scrollWeb.addScrollEventListener((ev) => {
            if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
                this.doInfinite(null);
            }
        });
    }
}

在 doInfinite 函数中，您可以省略或显示加载器，如下所示：

if (infiniteScroll !== null) {
     infiniteScroll.complete(); 
}

【讨论】：

不适合我，一旦页面加载，它只能工作一次。

【解决方案2】：

离子版本：3.9.2
我在组件中有类似的问题。我的解决方案是：

将<ion-scroll> 替换为<ion-content>
为<ion-content> 添加overflow: auto; 样式
享受虚拟滚动

【讨论】：

谢谢！你救了我免于拔头发。这也是一个简单的解决方案。

【解决方案3】：

您需要调用 $event.complete() 方法。来自 InifniteScroll 的 Ionic 文档页面：

"当用户调用分配给无限事件的表达式滚动到指定的距离。当这个表达式完成时它的任务，它应该在无限滚动上调用 complete() 方法实例。”

【讨论】：

【解决方案4】：

ion-Scroll 现在不会触发滚动事件，因此不会触发对滚动事件的 ion-infinite-scroll 订阅。您可以尝试找到一些解决方法，例如自己触发类似事件。我现在只是决定使用 css 来模拟常规离子含量的视觉相似性（不是完美的解决方案）。

Ionic Github 上的问题链接：https://github.com/ionic-team/ionic/issues/13904 论坛问题链接：https://forum.ionicframework.com/t/ionscroll-event-doesnt-fire-on-ion-scroll/96188/3

【讨论】：