Эффект, когда скроллишь страницу, и при достижении границы подгружаются новые данные (карточки с товарами и пр).
<template>
<div class="page">
<div class="card" v-for="item in data" :key="item.id">
Some layout for data
</div>
<p v-if="loading">Загрузка, подождите...</p>
</div>
</template>
<script>
import { onMounted, ref } from "vue"
export default {
setup() {
const data= ref([])
let loading = ref(true)
let pagination = ref({
perPage: 0,
hasPages: false,
nextPageUrl: '',
prevPageUrl: ''
})
const loadMoreData = async () => {
if (pagination.value.hasPages) {
paginationLoading.value = true
let obUrl = new URL(pagination.value.nextPageUrl)
let cursor = obUrl.searchParams.get("cursor")
await axios.post('api/data', {'cursor': cursor})
.then(response => {
pagination.value = response.data.pagination
data.value.push(...response.data.items)
})
.catch(error => {
console.log(error)
})
.finally(() => {
loading.value = false
})
}
}
onMounted(() => {
window.onscroll = () => {
let bottomWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight
if (bottomWindow) {
loadMoreData()
}
}
})
return {
data,
loading
}
}
}
</script>
<style lang="scss" scoped>
</style>
В данном примере, также, затронута работа с Laravel cursor pagination.