Question

我试图在页面的一半部分实现加载更多功能。所以我把那些代码放在离子卷轴中，但不知何故当前的实现不起作用。方法是

(ionInfinite)="doInfinite($event)"

未触发

并且不呈现加载器UI。但是，如果内容放在离子内容而不是离子滚动中，则相同的实现方式正在发挥作用。

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

Answer 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(); 
}

Answer 2

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

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

Answer 3

您需要调用$ event.complete（）方法。在InifniteScroll的Ionic文档页面中：

“分配给无限事件的表达式在用户使用时被调用滚动到指定距离。该表达式完成后它的任务，应该在无限滚动上调用complete（）方法实例。”

Answer 4

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

离子无限滚动不在离子滚动内部工作

4 个答案: