如何使用 Firebase 实时数据库 - v9 制作无限滚动

Question

我想做一个无限滚动，首先只加载 2 个用户数据，然后当管理员点击加载更多按钮时，它应该加载下 2 个用户数据。 在实时数据库中有可能吗？ 同样，如果用户在数据库中有很多帖子，我可以使用它向用户显示他们的帖子数量有限，而不是一次加载所有帖子。

我尝试使用 orderByChild() 方法，但它没有按预期工作。 我是 Firebase 的初学者。

编辑：谢谢 Jay 指导我。 这是 json 数据库结构：

{
  "users": {
    "BZh9dyH3fMTqoKFIOb38Px0ha243": {
      "info": {
        "private": {
          "displayName": "John",
          "email": "john@gmail.com",
          "emailVerified": true,
          "isAnonymous": false,
          "metadata": {
            "createdAt": 1661687731596,
            "lastLoginAt": 1669986823839
          },
          "photoURL": "https://...profile.png"
        },
        "public": {
          "displayName": "John",
          "photoURL": "https://...profile.png"
        }
      }
    },
    "RpxBOI7jXHef5NyEFFaI29ZMXcw2": {
      "info": {
        "private": {
          "displayName": "Albert",
          "email": "albert@gmail.com",
          "emailVerified": true,
          "isAnonymous": false,
          "metadata": {
            "createdAt": 166168790988,
            "lastLoginAt": 1669986823839
          },
          "photoURL": "https://...profile.png"
        },
        "public": {
          "displayName": "Albert",
          "photoURL": "https://...profile.png"
        }
      }
      // more users...
    }
  }
}

我试过的代码：

let last = 0;
let getNextData = () => {
  let dataRef = last === 0 ? query(ref(db, 'users'), orderByChild("info/private/metadata/createdAt"), limitToFirst(2)) : query(ref(db, 'users'), orderByChild("info/private/metadata/createdAt"), limitToFirst(2), startAfter(last));
    
  get(dataRef).then((snapshot) => {
    last += snapshot.size
  })
}
// load first two users
getNextData()
// load more
gId("loadMore").addEventListener("click", () => getNextData())

但它每次只加载 2 个用户。

Answer 1

是的，可以使用limitToFirst()或limitToLast()方法结合orderByChild() () 方法从实时数据库加载有限数据。

例如，如果要加载数据库中的前 2 个用户，可以使用以下查询：

const query = database.ref('users').orderByChild('timestamp').limitToFirst(2);

然后，当管理员点击“加载更多”按钮时，您可以使用以下查询加载接下来的 2 个用户：

const query = database.ref('users')
    .orderByChild('timestamp')
    .startAt(lastLoadedTimestamp)
    .limitToFirst(2);

其中lastLoadedTimestamp是之前加载的最后一个用户的时间戳。

这样，您可以对数据进行分页并以小块的形式加载它，而不是一次加载所有数据。 您可以在 Firebase 文档中找到有关实时数据库中分页数据的更多信息： https://firebase.google.com/docs/database/web/lists-of-data#paginate_data

编辑：

要获取最后一次将数据保存到 Firebase 中的快照的时间戳，可以在快照 object 上使用.getMetadata()方法。此方法返回一个 object，其中包含有关快照的元数据，包括时间戳。 这是一个例子：

var ref = firebase.database().ref("my_data");
ref.on("value", function(snapshot) {
  // Get the timestamp of the last time the data was saved
  var timestamp = snapshot.getMetadata().timestamp;
});

请注意，如果快照是使用服务器端时间戳保存的，则此方法只会返回时间戳。 如果快照是使用客户端时间戳保存的，则此方法不会返回值。 此外，此方法仅在您使用 Firebase 中的实时数据库时才有效。如果您使用的是 Cloud Firestore，则需要使用不同的方法来获取时间戳。