Question

我试图使我的网站更快一点，为此，我试图使每次点击时显示更多图像的按钮。例如：一个用户可以看到5张图像，如果用户想再看到5张图像，只需单击按钮。

所以现在只知道这个，我真的认为这不是正确的方法。

HTML->

<ion-card *ngFor="let pic of photoList">
    <h1>{{pic?.username}}</h1>
    <h2>{{pic?.name}}</h2>
    <img src={{pic?.picture}}>
</ion-card>
    <button ion-button (click)="load()">Load More Images</button>

Js->

load() {
    firebase.database().ref('HomeList').limitToLast(5).on('value', snapshot => {
      this.photoList = [];
      snapshot.forEach(snap => {
        this.photoList.push({
          id: snap.key,
          name: snap.val().name,
          username: snap.val().username,
          picture: snap.val().picture,
          email: snap.val().email,
          uid: snap.val().uid,
          rating: snap.val().rating
        });
        console.log(this.photoList);
        return false
      });
      return this.photoList.reverse();
    });
  }

Answer 1

所以您需要分页尝试使用.startAfter（number）和.limit（number）;假设this.current = 0;在builder（）中设置；

load() {
firebase.database().ref('HomeList').startAfter(this.current).limit(5).on('value', snapshot => {
  this.photoList = [];
  snapshot.forEach(snap => {
    this.photoList.push({
      id: snap.key,
      name: snap.val().name,
      username: snap.val().username,
      picture: snap.val().picture,
      email: snap.val().email,
      uid: snap.val().uid,
      rating: snap.val().rating
    });
    console.log(this.photoList);
    this.current = this.current  + photoList.length;
    return false
  });
  return this.photoList.reverse();
});

}

JavaScript会加载onclick数组的更多图像。使用Firebase

1 个答案: