如何在我的联系人列表中使用无限滚动

Question

我正在使用 ionic 4 并尝试使用无限滚动来避免联系人列表显示缓慢。 但不知道如何正确使用这个设施。请帮忙。 有没有其他方法可以在我的应用中快速加载联系人列表。 显示时间过长。请提出一些宝贵的建议。我为此苦苦挣扎了 2 或 3 天。

在我的 .ts 文件中

contactList: any[] = [];  

constructor(public navCtrl: NavController,private router: Router, 
     private contacts: Contacts , private sanitizer: DomSanitizer,) {       
    this.fetchDeviceContact();
}

fetchDeviceContact(){

    this.contacts.find(["displayName", "phoneNumbers","photos"], {multiple: true}).then((contacts) => {

      for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].displayName !== null) {
           var name  = contacts[i].displayName;
           var number =  contacts[i].phoneNumbers[0].value;
           if(contacts[i].photos !== null){
           var photo = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
           }else{
            photo = '';
           }

            var contactData={
                                "displayName":name,
                                "phoneNumbers":number,
                                "logo":photo,                             
                            }

          this.contactList.push(contactData);

           this.contactList.sort(function(a, b) {
             return compareStrings(a.displayName, b.displayName);
          });  

        }
      }

    });

    function compareStrings(a, b) {
                var nameA = a.toUpperCase(); 
                var nameB = b.toUpperCase(); 

                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                return 0;
    }

 loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

在 .html 文件中

<ion-content padding >
     <ion-content padding >
      <ion-searchbar  ></ion-searchbar>
      <ion-list  *ngFor="let contact of contactList; let i = index;" >   <!-- {{contact | json}} -->
      <ion-item >
      <ion-grid>
      <ion-row>
        <ion-col>
          <div>
            <ion-img [src]="contact.logo"></ion-img><img [src]="contact.logo">
            <ion-icon ios="ios-person" md="md-person"></ion-icon> <b>  {{contact.displayName}}</b>
          </div>
        </ion-col>
        </ion-row>
      <ion-row>
        <ion-col  size="10">
          <div>
            <ion-icon item-start  ios="ios-call" md="md-call" ></ion-icon> {{ contact.phoneNumbers}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </ion-item>
    </ion-list>


<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

Answer 1

使用切片管道解决：

.ts 文件：

slices: number = 10;
loadData(event) {

    setTimeout(() => {
      this.slices += 15;
      event.target.complete();
    }, 100);

  }

.html 文件：

<ion-list  *ngFor="let contact of contactList | slice:0:slices; " > 
</ion-list>