Skip to content

Instantly share code, notes, and snippets.

@ayoub-bousetta

ayoub-bousetta/Infinite scrolling with Vue 3

Created November 26, 2021 02:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ayoub-bousetta/b93217e47c765b3a0c2b8e36686e36f7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ayoub-bousetta/b93217e47c765b3a0c2b8e36686e36f7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ayoub-bousetta created this gist Nov 26, 2021.
    32 changes: 32 additions & 0 deletions Infinite scrolling with Vue 3
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    setup(props) {

    let products= ref(props.Product)




    window.addEventListener('scroll',debounce((e)=>{


    let pixelfrombottom = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight

    if(pixelfrombottom < 200){

    axios.get(products.value.next_page_url).then(res=>{


    products.value={
    ...res.data,
    data:[...products.value.data,...res.data.data]
    }


    })


    }

    },100))

    return {products}
    }