Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template></template>
<script>
export default {
// propriedades do component
props: {
paginationBox: { //pagination-box é o seletor do box com o conteúdo paginado
required: true // ele é obrigatório
},
margin: { // margin define a margem inferior para saber quando carregar mais conteúdo
default: 0 // é opcional, então o valor padrão é zero
} // com margin 0, a requisição ajax só dispara quando a rolagem da página encostar no component
},
data() {
return {
currentPage: 1, // contador de página
onLoad: false // se estamos carregando conteúdo ou não
}
},
methods: {
load(url, element) {
// aqui vamos carregar o conteúdo da próxima página
// e pegar somente o html do elemento informado em
// infinite-scroll
},
getMore() {
// vai disparar o método load e adicionar o conteúdo
// no DOM dinâmicamente
},
checkNeedMoreData() {
// vai verificar se já podemos carregar ou não mais conteúdo
}
},
mounted() {
// se precisar de mais conteúdo
if (this.checkNeedMoreData()) {
// carregamos
this.getMore();
}
// quando rolarmos o scroll da página
window.addEventListener('scroll', () => {
// verificamos se precisa de mais conteúdo
if (this.checkNeedMoreData()) {
// se precisar, carregamos
this.getMore();
}
});
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Document</title>
</head>
<body>
<div id="app">
<ul class="paginated-items">
@foreach ($users as $user)
<li>{{ $user->name }}</li>
@endforeach
</ul>
<!-- o componente vue, o local que ele fica é importante para definir
onde o será detectado a rolagem da página para disparar o carregamento
de novos items da paginação -->
<infinite-scroll pagination-box=".paginated-items"></infinite-scroll>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.