Question

我试图使用离子的无限卷轴。但是，无论我做什么，我都无法做到这一点。此外，这个例子对我来说没有任何意义。

我有这个页面我用来导入消息：

<astoot-layout [pageName]="pageName" [basePage]="this">
  <ion-content padding-horizontal padding class="messages-page-content">
    <!--<ion-scroll scrollY="true" class="messages">-->
    <ion-list>
      <ion-item *ngFor="let message of messages">
        <!--<div *ngFor="let message of messages" class="day-wrapper">-->
          <div [class]="'message message-' + getOwnerClassPrefix(message.senderUserId)">
            <div class="message-content message-content-text">{{message.messageText}}</div>
            <span class="message-timestamp">{{ getCreated(message.created) }}</span>
          </div>
        <!--</div>-->
      </ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="pullPage($event)">
      <ion-infinite-scroll-content>
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <!--</ion-scroll>-->
  </ion-content>
  <ion-footer>
    <ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
      <ion-input [(ngModel)]="messageText" class="message-editor" placeholder="Type a message"></ion-input>

      <ion-buttons end>
        <button ion-button icon-only *ngIf="messageText" class="message-editor-button" (click)="sendTextMessage()">
          <ion-icon name="send"></ion-icon>
        </button>

        <button ion-button icon-only *ngIf="!messageText" class="message-editor-button">
          <ion-icon name="mic"></ion-icon>
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>

</astoot-layout>

这是我永远不会调用的pullPage方法：

pullPage(infiniteScroll: any) {
    //TODO Get nextPage
    setTimeout(() => {
      this.baseProvider.getList(this.filterByConversationId).subscribe(entities => {
          this.messages.concat(entities);
          infiniteScroll.complete();
      });
    }, 500);
}

这里需要的是我的布局组件：

<ion-header>
  <ion-navbar align-title="center">
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title> {{pageName}} </ion-title>
    <ion-buttons end>
      <button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
        <ion-icon name="create"></ion-icon>
        &nbsp;Edit
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Save
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ng-content>
</ng-content>

我常常对ion-infinite-scroll如何运作感到困惑，它如何知道何时发出信号，是否只是基于它上面最近的列表？

如何让无限滚动事件被触发？

Answer 1

对于遇到类似问题的人来说，问题是由嵌套离子含量引起的离子问题，幸运的是在我的情况下我可以将其删除

我的消息页面现在调用组件而不包装内容：

<astoot-layout [pageName]="pageName" [basePage]="this"></astoot-layout>

我的布局页面现在看起来像这样：

<ion-header>
  <ion-navbar align-title="center">
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title> {{pageName}} </ion-title>
    <ion-buttons end>
      <button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
        <ion-icon name="create"></ion-icon>
        &nbsp;Edit
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Save
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

离子2无限滚动事件永远不会发生

1 个答案: