English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Una pagina frontale del progetto che mostra i prodotti acquistati richiede di poter caricare ulteriormente trascinando verso il basso. Riguardo a come implementare la funzione 'Carica altro', ci sono plugin disponibili online, come il famoso caricamento ulteriore e funzione di aggiornamento trascinando verso il basso implementati con iscroll.js.
Ma in realtà è molto complicato. Poiché è un plugin di terze parti, deve essere utilizzato secondo il metodo definito dall'altra parte, e sembra sempre molto a disagio. Inoltre, iscroll.js non integra la funzione di caricamento ulteriore, che deve essere estesa manualmente. Chi desidera continuare a utilizzare iscroll.js per implementare la funzione di caricamento ulteriore può consultare il link fornito.
In un progetto h5 è necessario implementare una funzione di paginazione semplice, poiché è un dispositivo mobile, considerare 'Carica altro' potrebbe essere meglio rispetto alla paginazione del PC.
Implementazione di caricamento ulteriore basata sul pulsante
Il più semplice è aggiungere un pulsante di caricamento ulteriore, se ci sono ulteriori dati, cliccare su 'Carica altro' per caricare ulteriori dati; fino a quando non ci sono più dati, nascondere il pulsante di caricamento ulteriore.
Ecco l'effetto:
Pagina HTML:
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">Elenco degli articoli</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--Pulsante di caricamento ulteriore-->
<div class="js-load-more">Carica altro</div>
</div>
<script src="js/zepto.min.js"></script>
Stile del pulsante di caricamento ulteriore: loadmore.css:
@charset "utf-8";
.js-load-more{}}
padding:0 15px;
width:120px;
height:30px;
background-color:#D31733;
color:#fff;
line-height:30px;
text-align:center;
border-radius:5px;
margin:20px auto;
border:0 none;
font-size:16px;
display:none;/*Non visibile per default, viene deciso se visualizzare o meno dopo che l'ajax ha avuto successo*/
}
Codice JavaScript per il caricamento ulteriore:
$(function(){
/*Inizializzazione*/
var counter = 0; /*Contatore*/
var pageStart = 0; /*Offset*/
var pageSize = 4; /*Dimensione*/
/*Caricamento iniziale*/
getData(pageStart, pageSize);
/*Ascoltatore di caricamento ulteriore*/
$(document).on('click', '.js-load-more', function(){
counter++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
Il codice qui non è molto. Tra cui getData(pageStart, pageSize) è il codice logica del business, responsabile di prelevare i dati dal server. Ecco un esempio:
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 = '';
/****Blocco logica del business: realizzare la combinazione di contenuti HTML e appendere alla pagina*********/
//console.log(offset, size, sum);
/*Se il numero di record rimanenti non è sufficiente per la pagina, l'intera pagina viene presa con il numero di record rimanenti*/
* Ad esempio, se il numero di pagine è 5 e rimangono solo 2, vengono prese solo 2
*
* Non c'è problema con questa query MySQL reale, non è necessario scrivere questo
*/
if (sum - offset < size) {
size = sum - offset;
}
/*Utilizzando un ciclo for per simulare il limit(offset, size) di SQL*/
per (var i = offset; i < (offset + size); i++) {
result +='<div class="weui_media_box weui_media_text">'
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*Nascondere il pulsante more*/
if ((offset + size) >= sum){
$('.js-load-more').hide();
}else{
$('.js-load-more').show();
}
},
error: function(xhr, type){
alert('Errore Ajax!');
}
});
}
è piuttosto semplice.
Caricamento ulteriore basato sull'evento di scorrimento
Abbiamo realizzato il caricamento ulteriore tramite pulsante di click, il processo è abbastanza semplice. Ecco un altro metodo per realizzare il caricamento ulteriore: basato sull'evento di scorrimento (scroll).
Inserisco direttamente il codice:
$(function(){
/*Inizializzazione*/
var counter = 0; /*Contatore*/
var pageStart = 0; /*Offset*/
var pageSize = 7; /*Dimensione*/
var isEnd = false;/*Segno di fine*/
/*Caricamento iniziale*/
getData(pageStart, pageSize);
/*Ascoltatore di caricamento ulteriore*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// Caricare nuovi contenuti quando la scorrimento raggiunge i 100 pixel sopra il fondo
// Codice centrale
if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) {
counter++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
Si può vedere che il codice non cambia molto, è sufficiente guardare le condizioni di giudizio nel codice centrale: quando la scorrimento raggiunge i 100 pixel sopra il fondo, caricare nuovi contenuti.
La logica del business getData(pageStart, pageSize) deve essere modificata all'interno di:
if ((offset + size) >= sum){
isEnd = true;//Non ci sono più dati
}
è sufficiente.
Certo, ci sono ancora aree da ottimizzare, ad esempio: come prevenire il rolling troppo veloce, che potrebbe causare richieste multiple prima che il server risponda?
Esempio di sintesi
Tramite l'esempio sopra, è ovvio che il secondo metodo è migliore, non è necessario fare clic. Ma il secondo metodo ha un problema:
Se impostiamo la dimensione della pagina per visualizzare 2 o 3 elementi (size=2), con un totale di 20 record, non è possibile attivare la logica di carica più scorrimento. In questo caso, c'è un pulsante di carica più.
Pertanto, possiamo combinare entrambi i metodi:
Di default, viene utilizzato l'evento di scorrimento per implementare la carica più, quando il numero visualizzato è troppo piccolo per attivare la logica di carica più scorrimento, viene utilizzato l'evento di click di carica più.
Ecco, sto facendo un'astrazione semplice di questo comportamento di carica più e ho scritto un semplice plugin:
/* loadmore.js */
/* */ /* loadmore.js */ /* Carica più */ * /* @time 2016-4-18 17:40:25 */ /* @author 飞鸿影~ */ /* @email [email protected] */ /*Parametri trasmissibili di default: size, scroll, possono essere personalizzati*/ /* */ ;(function(w,$){ var loadmore = { /*Metodo universale di carica più in una pagina*/ * /* @param callback Funzione di callback */ /* @param config Parametri personalizzati */ /* */ get : function(callback, config){ var config = config ? config : {}; /*Previene errori di errore quando non vengono trasmessi parametri*/ var counter = 0; /*Contatore*/ var pageStart = 0; var pageSize = config.size ? config.size : 10; /*Carica più tramite click predefinito*/ $(document).on('click', '.js-load-more', function(){ counter++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); }); /*Carica automatica tramite l'evento di scorrimento, supporto opzionale*/ config.isEnd = false; /*Segnale di fine*/ config.isAjax = false; /*Previene richieste multiple a causa di una scorriata troppo veloce e del server che non ha avuto tempo di rispondere*/ $(window).scroll(function(){ /*Abilita la carica scorrevole*/ if(!config.scroll){ return; } /*Quando la carica scorrevole è stata esaurita o quando è in corso una richiesta, non è possibile continuare*/ if(config.isEnd == true || config.isAjax == true){ return; } /*Carica nuovi contenuti quando si scorre fino a 100 pixel sopra il fondo*/ if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) { counter++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); } }); /*Caricamento automatico iniziale*/ callback && callback(config, pageStart, pageSize); }, } $.loadmore = loadmore; })(window, window.jQuery || window.Zepto);
Come usarlo? È molto semplice:
$.loadmore.get(getData, {
scroll: true, //Il valore predefinito è false, se supporta il caricamento a scorrimento
size: 7, //Il valore predefinito è 10
flag: 1, //Parametro personalizzato, opzionale, non utilizzato nell'esempio
});
Il primo parametro è la funzione di callback, ossia la nostra logica di business. Ho allegato la funzione di logica di business modificata终极：
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 = '';
/************Blocco logica di business: implementare la composizione del contenuto HTML e appendere alla pagina*************/
//console.log(offset, size, sum);
/*Se il numero di record rimanenti non è sufficiente per la pagina, l'intera pagina viene presa con il numero di record rimanenti*/
* Ad esempio, se il numero di pagine è 5 e rimangono solo 2, vengono prese solo 2
*
* Non scrivere questo nell'interrogazione MySQL reale
*/
if (sum - offset < size) {
size = sum - offset;
}
/*Utilizzando un ciclo for per simulare il limit(offset, size) di SQL*/
per (var i = offset; i < (offset + size); i++) {
result +='<div class="weui_media_box weui_media_text">'
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
/*Nascondi more*/
if ((offset + size) >= sum){
$('.js-load-more').hide();
config.isEnd = true; /*Ferma la richiesta di caricamento scorrevole*/
//Suggerimento non disponibile
}else{
$('.js-load-more').show();
}
},
error: function(xhr, type){
alert('Errore Ajax!');
}
});
}
Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e speriamo che tutti sosteniate e gridiate la guida.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.