Scroll Infinito como realizarlo?

  • Autor Autor Adan Najera
  • Fecha de inicio Fecha de inicio
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Adan Najera

Adan Najera

Dseda
Verificación en dos pasos activada
Verificado por Whatsapp
Hola amigos de forobeta...

Desde el martes estoy intentando realizar un scrollinfinito pero no he tenido exito... ya me vi varios ejemplos y tutoriales pero no consigo realizarlo...
Asi que quisiera saber si ustedes tienen alguna idea para poder realizar el scroll infinito y me puedan orientar... La web hace consulta a la base de datos pero como son muchos datos quiero que vayan cargando mientras se desliza hacia abajo... pero como digo no se hacerlo...

Insertar CODE, HTML o PHP:
<?php
	require 'conexion.php';
	$mysqli->set_charset('utf8');
	
	if($mysqli->connect_errno){
		printf("Falló la conexión: %s\n", $mysqli->connect_error);
		exit();
	}
	$resultado = $mysqli->query("Select * From secretos ORDER BY id DESC limit 0,6", MYSQLI_USE_RESULT);
	$res=$resultado;
	
	echo' <div id="numero" class="mdl-grid portfolio-max-width">';
	
	while($SecretosTec= $res->fetch_assoc())
	{
		
		if($SecretosTec['sexo']=="Hombre"){
			echo'<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
			<div class="sexoHombre"><center>'.$SecretosTec['sexo'].'</center>
			</div>
			<div class="mdl-card__title">
			<h2 class="mdl-card__title-text">'.$SecretosTec['nombre'].'</h2>
			</div>
			<div class="mdl-card__supporting-text">'.$SecretosTec['secreto'].'</div>
			<div class="mdl-card__supporting-text" style="text-align: right">'.$SecretosTec['fecha'].'</div>
			<div class="mdl-card__actions mdl-card--border">';
			echo'<center><a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" >OMG!</a></center>
			</div>
			</div>';
			} else if($SecretosTec['sexo']=="Mujer"){
			echo'<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
			<div class="sexoMujer"><center>'.$SecretosTec['sexo'].'</center>
			</div>
			<div class="mdl-card__title">
			<h2 class="mdl-card__title-text">'.$SecretosTec['nombre'].'</h2>
			</div>
			<div class="mdl-card__supporting-text">'.$SecretosTec['secreto'].'</div>
			<div class="mdl-card__supporting-text" style="text-align: right">'.$SecretosTec['fecha'].'</div>
			<div class="mdl-card__actions mdl-card--border">';
			echo'<center><a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" >OMG!</a></center>
			</div>
			</div>';
			} else {
			echo'<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
			<div class="sexoNo"><center>'.$SecretosTec['sexo'].'</center>
			</div>
			<div class="mdl-card__title">
			<h2 class="mdl-card__title-text">'.$SecretosTec['nombre'].'</h2>
			</div>
			<div class="mdl-card__supporting-text">'.$SecretosTec['secreto'].'</div>
			<div class="mdl-card__supporting-text" style="text-align: right">'.$SecretosTec['fecha'].'</div>
			<div class="mdl-card__actions mdl-card--border">';
			echo'<center><a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" >OMG!</a></center>
			</div>
			</div>';
		}
		
		
	}
	
?>

Ese es mi codigo... que podificaciones debo de hacer para lograr el scroll infinito... o como busco en google para encontrar ejempls que me funcionen...

Gracias y Saludos...
 
Pero ¿Qué es lo que te falla? ¿Carga mal, no carga o qué? ¿Estas usando AJAX, jQuery, etc?

- - - Actualizado - - -

Por cierto, creo que te puede servir: # 1 How to create an Infinite Scroll | PHP/jQuery/Ajax - YouTube

Ese codigo esta limpio sin el Scroll... pero cuando lo aplico usando algun ejemplo deja de funcionar.... Gracias por el tuto... me lo vere a ver si lo resuelvo 🙂

- - - Actualizado - - -

Resuelto con el tuto que dejo el compañero
 
Estado

🔒 Este tema está cerrado para nuevas respuestas.

⏰ Solo el creador del tema puede solicitar la reapertura de sus propios temas, pero únicamente dentro de los 60 días previos a la última actualización.

Atrás
Arriba