1

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

(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>
4

4 回答 4

4

Ionic-version: 3.9.2
我在组件中有类似的问题。我的解决方案是：

  1. 替换<ion-scroll>为<ion-content>
  2. 添加overflow: auto;样式为<ion-content>
  3. 享受虚拟滚动
于 2018-11-29T12:47:54.013 回答
4

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

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

在 Element 上添加了侦听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(); 
}
于 2018-05-29T02:55:45.297 回答
1

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

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

于 2018-08-31T19:59:50.643 回答
0

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-离子滚动/96188/3

于 2018-01-29T11:15:39.833 回答