[Vuejs]-How do I turn my current page displaying profiles into one that uses infinite scrolling?

by

0👍

You need an offset when querying new data. I don’t have much experience in firebase but it should be startAt method. What you can try is to keep the current offset of your data and when you scroll to the point where you need to load new data just call the method with offset’s value.

Here you can read more about startAt method.
https://firebase.google.com/docs/firestore/query-data/query-cursors

Giving you an example what you can try:

const load = async (offset = 0) {
     try{
        const res = await projectFirestore.collection('Premium').limit(4).startAt(offset).get()

        Premium.value = res.docs.map(doc => {
            console.log(doc.data())
            return {...doc.data(), id: doc.id}
        })
    }
    catch (err){
        error.value = err.message
        console.log(error.value)
    }
}

Now you need a scroll method to detect the element’s position with user’s browser window. When you get to that point of the page you can call the function and add the offset parameter to it.

Leave a comment