This article has shared the specific codes for pull-down refresh and pull-up loading for your reference. The specific content is as follows
first step, download the dropload plugin, download the dropload plugin address Official document:/ximan/dropload
Step 2, import the files from the downloaded dropload plug-in to the page. Note that you should also introduce Jquery1.7 or above or Zepto, choose one of them. Do not reference them at the same time, because dropload is implemented based on jquery
Step 3, put the following code at the bottom of the page, note that it is the bottom, otherwise the dropload plug-in cannot obtain the height
**Basic code structure**
//#content is the id of a divvar dropload = $('#content').dropload({
//scrollArea is critical, otherwise loading more will not workscrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓Pull down to refresh</div>',
domUpdate : '<div class="dropload-update">↑Release update</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑Pull-up load more</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading...</div>',
domNoData : '<div class="dropload-noData">No data yet</div>'
},
loadUpFn : function(me){
// Pull down to refresh the function that needs to be called alert("Pull down to refresh the function that needs to be called");
//Reset drop-down refresh ();
},
loadDownFn : function(me){
//Pull up to load more functions that need to be called alert("Pull-up load more functions that need to be called");
//Timer function, in order to see more effects of pull-up loading setTimeout(function(){
// Every time the data is loaded, it must be reset ();
},1000);
}
});
Some complete examples are just checked on demand
Example 1.Load the bottom
<script>
$(function(){
// Number of pages var page = 0;
// Show 5 per page var size = 5;
// dropload call $('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
page++;
// Splice HTML var result = '';
$.ajax({
type: 'GET',
url: '/tools/dropload/?page='+page+'&size='+size,//Compare with the background interface dataType: 'json',
success: function(data){
var arrLen = ;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// If there is no data }else{
// Lock ();
// No data ();
}
// For testing, delay loading by 1 second setTimeout(function(){
// Insert data to the page and put it at the end $('.lists').append(result);
// Every time the data is inserted, it must be reset ();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
}
});
});
</script>
Example 2.Loading top, bottom
<script>
$(function(){
// Number of pages var page = 0;
// Show 10 per page var size = 10;
// dropload
$('.content').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓Pull down to refresh-Custom content</div>',
domUpdate : '<div class="dropload-update">↑Release update-Custom content</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading-Custom content...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑Pull-up load more-Custom content</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading-Custom content...</div>',
domNoData : '<div class="dropload-noData">No data yet-Custom content</div>'
},
loadUpFn : function(me){
$.ajax({
type: 'GET',
url: 'json/',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < ; i++){
result += '<a class="item opacity" href="'+[i].link+'">'
+'<img src="'+[i].pic+'" alt="">'
+'<h3>'+[i].title+'</h3>'
+'<span class="date">'+[i].date+'</span>'
+'</a>';
}
// For testing, delay loading by 1 second setTimeout(function(){
$('.lists').html(result);
// Every time the data is loaded, it must be reset ();
// Reset the number of pages and re-get loadDownFn data page = 0;
// Unlock the lock in loadDownFn ();
(false);
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
},
loadDownFn : function(me){
page++;
// Splice HTML var result = '';
$.ajax({
type: 'GET',
url: '/tools/dropload/?page='+page+'&size='+size,
dataType: 'json',
success: function(data){
var arrLen = ;
if(arrLen > 0){
for(var i=0; i<arrLen; i++){
result += '<a class="item opacity" href="'+data[i].link+'">'
+'<img src="'+data[i].pic+'" alt="">'
+'<h3>'+data[i].title+'</h3>'
+'<span class="date">'+data[i].date+'</span>'
+'</a>';
}
// If there is no data }else{
// Lock ();
// No data ();
}
// For testing, delay loading by 1 second setTimeout(function(){
// Insert data to the page and put it at the end $('.lists').append(result);
// Every time the data is inserted, it must be reset ();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
},
threshold : 50
});
});
</script>
Example 3.Loading multiple times
$(function(){
//Use this writing method to limit the number of loads multiple times. var timer;
$('.header .ipt').on('input',function(){
var _length = $(this).val();
// If the input value is not a number or is empty, jump out if(isNaN(_length) || _length === ''){
return false;
}
clearTimeout(timer);
timer = setTimeout(function(){//No timer is required // Clear content $('.lists').html('');
$('.dropload-down').remove();
var counter = 0;
// Show 4 per page var num = 4;
var pageStart = 0,pageEnd = 0;
// dropload
$('.content').dropload({
scrollArea : window,
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/',
dataType: 'json',
success: function(data){
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;
for(var i = pageStart; i < pageEnd; i++){
result += '<a class="item opacity" href="'+[i].link+'">'
+'<img src="'+[i].pic+'" alt="">'
+'<h3>'+[i].title+'</h3>'
+'<span class="date">'+[i].date+'</span>'
+'</a>';
if((i + 1) >= _length || (i + 1) >= ){
// Lock ();
// No data ();
break;
}
}
// For testing, delay loading by 1 second setTimeout(function(){
$('.lists').append(result);
// Every time the data is loaded, it must be reset ();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
}
});
},500);
});
Example 4.Fixed layout, load top and bottom
$(function(){
// Button operation $('.header .btn').on('click',function(){
var $this = $(this);
if(!!$('lock')){
$('class','btn unlock');
$('Unlock');
// Lock ();
$('.dropload-down').hide();
}else{
$('class','btn lock');
$('locking');
// Unlock ();
$('.dropload-down').show();
}
});
// dropload
var dropload = $('.inner').dropload({
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓Pull down to refresh</div>',
domUpdate : '<div class="dropload-update">↑Release update</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑Pull-up load more</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>loading...</div>',
domNoData : '<div class="dropload-noData">No data yet</div>'
},
loadUpFn : function(me){
$.ajax({
type: 'GET',
url: 'json/',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < ; i++){
result += '<a class="item opacity" href="'+[i].link+'" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'
+'<img src="'+[i].pic+'" alt="">'
+'<h3>'+[i].title+'</h3>'
+'<span class="date">'+[i].date+'</span>'
+'</a>';
}
// For testing, delay loading by 1 second setTimeout(function(){
$('.lists').html(result);
// Every time the data is loaded, it must be reset ();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
},
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/',
dataType: 'json',
success: function(data){
var result = '';
for(var i = 0; i < ; i++){
result += '<a class="item opacity" href="'+[i].link+'">'
+'<img src="'+[i].pic+'" alt="">'
+'<h3>'+[i].title+'</h3>'
+'<span class="date">'+[i].date+'</span>'
+'</a>';
}
// For testing, delay loading by 1 second setTimeout(function(){
$('.lists').append(result);
// Every time the data is loaded, it must be reset ();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// Reset even if there is a load error ();
}
});
}
});
});
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.