有没有办法使用firebase实时数据库（vuejs）进行分页？

Question

我正在尝试对来自 firebase 实时数据库的数据进行分页。

我必须更改为 firestore 吗？ Google 的文档 (https://firebase.google.com/docs/firestore/query-data/query-cursors) 中的所有内容都在哪里解释，或者 rtdb 也可以？

这是我的代码（我正在使用 vue js）：

loadConcerts ({commit}) {
      commit('setLoading', true)
      firebase.database().ref('concerts')
      .orderByChild('expires')
      .startAt(Date.now() / 1e3)
      .limitToFirst(10)
      .once('value')
      .then(data => {
        const concerts = []
        data.forEach(element => {
        concerts.push({
              id: element.key,
              title: element.val().title,
              day: element.val().day,
              ticketlink: element.val().ticketlink,
              description: element.val().descriptio
            })
        })
          commit('setLoadedConcerts', concerts)
          commit('setLoading', false)
        })
        .catch(
          (error) => {
            console.log(error)
            commit('setLoading', false)
          }
        )
    },

I would like to add pagination after 10 results, or infinite scrolling.

Answer 1

我也有类似的分页问题。文档似乎不足，即它们向您展示了如何转到下一页，但没有告诉您如何返回上一页。真是令人沮丧。

我正在使用firestore

下面是我如何实现一个简单的分页。我已经配置好了VueFire、Firebase和BootstrapVue，我直接上代码。

做什么与众不同，没有人告诉你。

• 使用VueFire 编程绑定而不是声明性绑定see here
• 要在firebase 中获取firstVisible 项目，请运行documentSnapshots.docs[0]

<template>
    <div>
        <p>{{countries}}</p>
         <b-button-group size="lg" class="mx-2">
      <b-button :disabled="prev_btn" @click="previous" >&laquo;</b-button>
      <b-button :disabled="next_btn" @click="next">&raquo;</b-button>
    </b-button-group>
    </div>
</template>
<script>
 import firebase from 'firebase/app'
import 'firebase/auth'
import { db } from '../main'

export default {
 name: 'Countries',
 data () {
  return {
   countries: [],
   limit: 2,
   lastVisible: '',
   firstVisible: '',
   next_btn: false,
   prev_btn: true
  }
 },
 methods: {
  next () {
   if (!this.next_btn) {
   // bind data with countries
    this.$bind('countries', db.collection('Countries').orderBy('createdAt').startAfter(this.lastVisible).limit(this.limit))
    // set last and first visible items
    db.collection('Countries').orderBy('createdAt').startAfter(this.lastVisible).limit(this.limit).get().then(documentSnapshots => {
     this.lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1]
     this.firstVisible = documentSnapshots.docs[0]
    }).then(() => {
     // Peep  on the next  next query to see if it gives zero
     db.collection('Countries').orderBy('createdAt').startAfter(this.lastVisible).limit(this.limit).get()
      .then(snap => {
       if (snap.size === 0) {
        //disable button if the next peeped result gets zero
        this.next_btn = true
        // enable previous button
        this.prev_btn = false
       } else {
        // enable next button if peeped result is not zero
        this.next_btn = false
        // enable previous button
        this.prev_btn = false
       }
      })
    })
   }
  },
  previous () {
   // Ensure previous is not zero
   db.collection('Countries').orderBy('createdAt').endBefore(this.firstVisible).limitToLast(this.limit).get().then(snap => { return snap.size })
   .then(size => {
    //confirm is not zero here
    if (size !== 0) {
     //bind the previous to countries
     this.$bind('countries', db.collection('Countries').orderBy('createdAt').endBefore(this.firstVisible).limitToLast(this.limit))
     // Set last and first visible
     db.collection('Countries').orderBy('createdAt').endBefore(this.firstVisible).limitToLast(this.limit).get().then(documentSnapshots => {
      this.lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1]
      this.firstVisible = documentSnapshots.docs[0]
     }).then(() => {
      // peep the next previous query
      db.collection('Countries').orderBy('createdAt').endBefore(this.firstVisible).limitToLast(this.limit).get()
       .then(snap => {
        if (snap.size === 0) {
         //if next peeped previous button gets 0 disable
         this.prev_btn = true
         this.next_btn = false
        } else {
         //if next peeped result is does not get 0 enable buttons
         this.prev_btn = false
         this.next_btn = false
        }
       })
     })
    }
   })
  }
 },
 mounted () {
  // run first query and bind data
  this.$bind('countries', db.collection('Countries').orderBy('createdAt').limit(this.limit))
  // set last and first Visible
  db.collection('Countries').orderBy('createdAt').limit(this.limit).get().then(documentSnapshots => {
   this.lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1]
   this.firstVisible = documentSnapshots.docs[0]
  }).then(() => {
            // peep to check if next should be on or off
            db.collection('Countries').orderBy('createdAt').startAfter(this.lastVisible).limit(this.limit).get()
                .then(snap => {
                    if (snap.size === 0) {
                        this.next_btn = true
                    }
                })
        })
 }
}
</script>