English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En una página frontal del proyecto que muestra los productos comprados, se requiere que se pueda cargar más al desplazarse hacia abajo. Sobre cómo implementar la función de "cargar más", en línea hay complementos disponibles, por ejemplo, el famoso uso de iscroll.js para implementar la función de cargar más hacia arriba y refrescar hacia abajo.
Pero en realidad es muy complicado de usar. Como es un complemento de terceros, debe usarse según el método definido por el otro lado, y siempre se siente muy incómodo de usar. Además, iscroll.js no tiene integrado la función de cargar más, por lo que es necesario expandirlo por oneself. Si quieres seguir usando iscroll.js para implementar la función de cargar más, puedes ver el enlace proporcionado.
data[i].title5En el proyecto se necesita implementar una función de paginación simple, ya que es para móviles, considerar usar 'Cargar más' sería mejor que el desplazamiento de la página en el PC.
Carga adicional basada en el botón
Lo más simple es proporcionar un botón de carga adicional, si hay más datos, hacer clic para cargar más, seguir cargando algunos datos; hasta que no haya más datos, ocultar el botón de carga adicional.
El efecto es el siguiente:
HTML de la página:
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">Lista de artículos</div>
<div class="weui_panel_bd js-$(".js-lista">
</div>
</div>
!--Botón de carga adicional-->
<div class="js-cargar-more">Cargar más</div>
</div>
<script src="js/zepto.min.js"></script>
Estilo del botón de carga adicional: loadmore.css:
@charset "utf-8";
.js-cargar-more{
relleno:0 15px;
ancho:120px;
altura:30px;
fondo-color:#D31733;
color:#fff;
línea-altura:30px;
texto-alineación:center;
borde-radio:5px;
margen:20px auto;
borde:0 none;
fuente-size:16px;
display:none;/*No se muestra por defecto, se decide si se muestra o no después de que la llamada AJAX tenga éxito*/
}
Código JavaScript para cargar adicionalmente:
$(function() {
/*inicialización*/
var counter = 0; /*Counter*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size}*/
/*First load*/
getData(pageStart, pageSize);
/*Monitor loading more*/
$(document).on('click', '.js-cargar-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
El código aquí no es muy extenso. getData(pageStart, pageSize) es el código de lógica de negocio, responsable de obtener los datos del servidor. Aquí hay un ejemplo:
function getData(offset, size) {
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/****Bloque de lógica de negocio: implementar la concatenación de contenido html y append a la página*********/
//console.log(offset, size, sum);
/*Si el número de registros restantes no es suficiente para la paginación, permite que el número de paginación tome el número de registros restantes
* Por ejemplo, el número de paginación es5solo queda2fila, solo se toma2fila
*
* En la consulta MySQL real, no es necesario escribir esto y no habrá problemas
*/
if(sum - if(sum
desplazamiento < tamaño ){ - tamaño = suma
}
/*desplazamiento;*/
usar el bucle for para simular SQL limit(offset,size)+for(var i=desplazamiento; i< (desplazamiento++size); i
{ +result+
<div class="weui_media_box weui_media_text">'+ <a href="' +data[i].url4 " target="_blank"><h+ class="weui_media_title">' +p>'/data[i].title4h/<+
a>'+ <p class="weui_media_desc">' +p>'/data[i].desc+
p>'/<
}
div>';-$(".js-blog
/*******************************************/
/*Ocultar el botón 'more'*/
ocultar more + if ( (desplazamiento
$(".js-cargar-(tamaño) >= suma){
}else{
$(".js-cargar-more().show();
}
},
error: function(xhr, type){
alert('Error de Ajax!');
}
});
}
es bastante simple.
Carga adicional basada en el evento de desplazamiento
En el párrafo anterior, realizamos la carga adicional mediante el clic de un botón, todo el proceso es bastante simple. Aquí, proporcionaré otro método para lograr la carga adicional: basado en el evento de desplazamiento (scroll).
Aquí se adjunta el código directamente:
$(function() {
/*inicialización*/
var counter = 0; /*Counter*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size}*/
var isEnd = false;/*finalización del marcador*/
/*First load*/
getData(pageStart, pageSize);
/*Monitor loading more*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// cuando se desciende hasta justo encima del fondo100 píxeles, carga de nuevo contenido
// Core code
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
It can be seen that the code change is not big, mainly looking at the judgment conditions in the core code: when scrolling to the top above100 pixels, load new content.
Business logic getData(pageStart, pageSize) only needs to change the if ( (offset + Change the logic in (size) >= sum) to:
ocultar more + if ( (desplazamiento isEnd = true;//No more }
is done.
Of course, there are still places to optimize in this, such as: how to prevent the scroll from being too fast, so that the server does not have time to respond and cause multiple requests?
Comprehensive example
Through the above example, it is obvious that the second one is better, no need to click. But the second method has a problem:
If the page size is set to display each time2records or3records (size=2), the total number of records is20, you will find that you cannot trigger the logic of loading more by scrolling down. In this case, a 'load more' click button is needed.
Therefore, we can combine the two methods above:
By default, it uses the scroll event to implement loading more, and when the number of displayed items is too small to trigger the logic of loading more by scrolling down, it uses the 'load more' click event.
Here, I have made a simple abstraction of the 'load more' behavior and written a simple plugin:
loadmore.js
/* * loadmore.js * Load more * * @time 2016-4-18 17:40:25 * @author Feihongying~ * @email [email protected] * Default parameters that can be passed are: size, scroll, which can be customized * */ ;(function(w,$){ var loadmore = { /*Single page loading more general method * * @param callback Callback method * @param config Custom parameters * */ get : function(callback, config){ var config = config ? config : {}; /*Prevent errors from missing parameters*/ var counter = 0; /*Counter*/ var pageStart = 0; var pageSize = config.size ? config.size : 10; /*Default loading more through clicking*/ $(document).on('click', '.js-cargar-more', function(){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); }); /*Through automatic monitoring of scroll events to load more, optional support*/ config.isEnd = false; /*finalización del marcador*/ config.isAjax = false; /*Para evitar que la scrolling sea demasiado rápido, el servidor no tiene tiempo de responder y causar múltiples solicitudes*/ $(window).scroll(function(){ /*¿Se abre la carga deslizante?*/ if(!config.scroll){ return; } /*No se puede continuar si ya no hay más datos para la carga deslizante o si se está realizando una solicitud*/ if(config.isEnd == true || config.isAjax == true){ return; } /*cuando se desciende hasta justo encima del fondo100 píxeles, carga de nuevo contenido*/ if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); } }); /*Carga automática por primera vez*/ callback && callback(config, pageStart, pageSize); }, } $.loadmore = loadmore; })(window, window.jQuery || window.Zepto);
¿Cómo se utiliza? Es muy simple:
$.loadmore.get(getData, {
scroll: true, //Por defecto es false, si se admite la carga deslizante
size:7, //Por defecto es10
flag: 1, //Parámetros personalizados, opcionales, no se utilizan en el ejemplo
});
El primer parámetro es la función de devolución de llamada, es decir, nuestra lógica de negocio. Publico aquí el método de lógica de negocio modificado final:
function getData(config, offset,size){
config.isAjax = true;
$.ajax({
type: 'GET',
url: 'json/blog.json',
dataType: 'json',
success: function(reponse){
config.isAjax = false;
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/************Bloque de lógica de negocio: implementar la concatenación de contenido html y append a la página*****************/
//console.log(offset, size, sum);
/*Si el número de registros restantes no es suficiente para la paginación, permite que el número de paginación tome el número de registros restantes
* Por ejemplo, el número de paginación es5solo queda2fila, solo se toma2fila
*
* No se escribe esto en la consulta MySQL real
*/
if(sum - if(sum
desplazamiento < tamaño ){ - tamaño = suma
}
/*desplazamiento;*/
usar el bucle for para simular SQL limit(offset,size)+for(var i=desplazamiento; i< (desplazamiento++size); i
{ +result+
<div class="weui_media_box weui_media_text">'+ <a href="' +data[i].url4 " target="_blank"><h+ class="weui_media_title">' +p>'/data[i].title4h/<+
a>'+ <p class="weui_media_desc">' +p>'/data[i].desc+
p>'/<
}
div>';-$(".js-blog
/*******************************************/
/*list').append(result);*/
ocultar more + if ( (desplazamiento
$(".js-cargar-(tamaño) >= suma){
more().hide(); /*config.isEnd = true;*/
//se ha detenido la solicitud de carga de deslizamiento
}else{
$(".js-cargar-more().show();
}
},
error: function(xhr, type){
alert('Error de Ajax!');
}
});
}
Este es el contenido completo del artículo, espero que ayude a su aprendizaje y que todos nos apoyen en el tutorial de alarido.
Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad por responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)