I am using ionic 4 and trying to use infinite scroll to avoid slow display of the contact list.
but don’t know how to use this facility properly . please help. Is there any other way to load the contact list fast in my app . the display time is too long . please give some valuable suggestions . I am struggling with this for 2 or 3 days.
in my .ts file
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(); // ignore upper and lowercase
var nameB = b.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
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;
}
}
in .html file
<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>
Thank in advanced.