carregamento de postagens com o scroll do usuário
05/03/2021
0
como posso fazer um sistema de carregamento de conteúdo como o do "https://canaltech.com.br/", que o usuário chega no final dando scroll e carrega mais conteúdo sem precisar mudar de pagina, se possível ser na linguagem PHP.
Mateus Scheifer
Curtir tópico
+ 0
Responder
Posts
07/03/2021
Heraldo Araujo
Olá, Mateus!
Bem, vamos por partes, pra vc fazer isso, antes, vc precisa de entender que o PHP sozinho não resolve. É tudo um truque de javascript+php+ajax;
Então, esse código abaixo, serve pra te mostrar como o browser saberá quando o scroller chegou ao fim(pertinho do fim, na verdade) para puder pedir ao ajax que execute um php e imprima mais elementos(quantos vc quiser);
Quando vc entender isso, é só fazer o ajax(eu indiquei onde deve ficar o ajax) e chamar o programa .php que devolverá os elementos(html) prontos para imprimir no final da página .
(estou supondo que vc manja de php e de ajax, se não for o caso, responde que eu vou te mostrando mais coisas ).
Aqui abaixo, arquivo html :
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="ISO 8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nacionalidade</title>
<style>
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fix" style="position:fixed; background:#aaa; width:1000px; " >
</div>
<div id="roller">
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
</div>
<script>
$(document).ready(function() {
var contador = 0 ;
$(window).bind('scroll', function() {
var altura = $(window).scrollTop();
var offset = $('body').offset().top;
var altura1 = $('body').outerHeight();
var altura2 = window.innerHeight ;
var limite = offset + altura1 - altura2;
//*********************************************************************************************************************************
// esse trecho de código é só para você ver(em tempo real) os valores que precisamos capturar para obter momento de inserir novos elementos
//*********************************************************************************************************************************
$("#span1").remove();
$("#span2").remove();
$("#span3").remove();
$("#fix").append("<span id=span1> Altura do Scroll=>"+altura+"</span>");
$("#fix").append("<span id=span2> Limite da altura do Scroll=>"+limite+"</span>");
$("#fix").append("<span id=span3> Contador de novas inserções=>"+contador+"</span>");
//******************************************************************************************************************************
if ( altura > limite ) {
contador = contador + 1 // só para você entender que houve nova inserção
// É AQUI QUE VC DEVE INSERIR O AJAX PARA IMPRIMIR MAIS CONTEÚDO(ASSUNTO PARA OUTRA AULA, CASE SEJA NECESSÁRIO)
// forçar nova inserção de elementos
$("body").append("<div style='width:1000px; height:100px; background:#100966 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#101234 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#134482 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#905574 ;border:solid 5px #000'></div>");
}
});
});
</script>
</body>
</html>
Bem, vamos por partes, pra vc fazer isso, antes, vc precisa de entender que o PHP sozinho não resolve. É tudo um truque de javascript+php+ajax;
Então, esse código abaixo, serve pra te mostrar como o browser saberá quando o scroller chegou ao fim(pertinho do fim, na verdade) para puder pedir ao ajax que execute um php e imprima mais elementos(quantos vc quiser);
Quando vc entender isso, é só fazer o ajax(eu indiquei onde deve ficar o ajax) e chamar o programa .php que devolverá os elementos(html) prontos para imprimir no final da página .
(estou supondo que vc manja de php e de ajax, se não for o caso, responde que eu vou te mostrando mais coisas ).
Aqui abaixo, arquivo html :
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="ISO 8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nacionalidade</title>
<style>
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="fix" style="position:fixed; background:#aaa; width:1000px; " >
</div>
<div id="roller">
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#ff8090 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#8090ff ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#aa9292 ;border:solid 5px #000; '></div>
<div style='width:1000px; height:100px; background:#9394bb ;border:solid 5px #000; '></div>
</div>
<script>
$(document).ready(function() {
var contador = 0 ;
$(window).bind('scroll', function() {
var altura = $(window).scrollTop();
var offset = $('body').offset().top;
var altura1 = $('body').outerHeight();
var altura2 = window.innerHeight ;
var limite = offset + altura1 - altura2;
//*********************************************************************************************************************************
// esse trecho de código é só para você ver(em tempo real) os valores que precisamos capturar para obter momento de inserir novos elementos
//*********************************************************************************************************************************
$("#span1").remove();
$("#span2").remove();
$("#span3").remove();
$("#fix").append("<span id=span1> Altura do Scroll=>"+altura+"</span>");
$("#fix").append("<span id=span2> Limite da altura do Scroll=>"+limite+"</span>");
$("#fix").append("<span id=span3> Contador de novas inserções=>"+contador+"</span>");
//******************************************************************************************************************************
if ( altura > limite ) {
contador = contador + 1 // só para você entender que houve nova inserção
// É AQUI QUE VC DEVE INSERIR O AJAX PARA IMPRIMIR MAIS CONTEÚDO(ASSUNTO PARA OUTRA AULA, CASE SEJA NECESSÁRIO)
// forçar nova inserção de elementos
$("body").append("<div style='width:1000px; height:100px; background:#100966 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#101234 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#134482 ;border:solid 5px #000'></div>");
$("body").append("<div style='width:1000px; height:100px; background:#905574 ;border:solid 5px #000'></div>");
}
});
});
</script>
</body>
</html>
Responder
08/03/2021
Heraldo Araujo
Ah , esse código foi validado, pode executá-lo no seu servidor de internet.
Responder
Clique aqui para fazer login e interagir na Comunidade :)
