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

问题描述

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

I'm trying to implement load more functionality in the half portion of the page.So I put that code inside the ion-scroll but somehow current implementation is not working i.g. the method is

(ionInfinite)="doInfinite($event)"

未触发且未呈现加载程序UI。但是，如果内容放在离子内容而不是离子滚动中，则相同的实现工作。

is not triggered and loader UI is not rendered. However, the same implementation is working if the content placed in ion-content instead of 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>

推荐答案

抱歉我的英文不好，但我解决了这个问题。

Sorry for my bad english, but I resolved this problem.

       <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元素上的监听器被添加到发现中。

Added listener on DOM Element to discovery if the scroll arrived in the end.

ngAfterViewInit() {

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

在donInfinite上你可以省略或显示加载。

On donInfinite can you to omit or show a loading.

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

这篇关于离子无限滚动不在离子滚动内部工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！