English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
When displaying purchased items on a front-end page of a project, it is required to be able to pull down to load more. There are plugins available on the internet for implementing the 'load more' function, such as the famous ones that use iscroll.js to implement the pull-up to load more and pull-down to refresh functions.
But in practice, it is quite麻烦. As a third-party plugin, it needs to be used according to the methods defined by the other party, and it always feels uncomfortable to use. Moreover, iscroll.js itself does not integrate the function of loading more, and it needs to be expanded manually. If you want to continue using iscroll.js to implement the loading more function, you can check the link provided above.
h5The project needs to implement a simple pagination function. Since it is a mobile terminal, considering using 'load more' would be better than page flipping on the PC end.
Loading more based on button
The simplest way is to provide a 'load more' button. If there is more data, click to load more, continue to pull a few more data; until there is no more data, hide the 'load more' button.
The effect is as follows:
Page HTML:
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">Article list</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--Load more button-->
<div class="js-load-more">Load more</div>
</div>
<script src="js/zepto.min.js"></script>
Style of loading more button: 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;/*It is not displayed by default, and it will decide whether to display it or not after the ajax call is successful*/
}
JavaScript code for loading more:
$(function(){
/*Initialization*/
var counter = 0; /*Counter*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size}}*/
/*First load*/
getData(pageStart, pageSize);
/*Listen to load more*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
The code here is not much. Among them, getData(pageStart, pageSize) is the business logic code, responsible for pulling data from the server. Here is an example:
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 = '';
/****Business logic block: Implement concatenation of html content and append it to the page*********/
//console.log(offset, size, sum);
/*If the remaining number of records is not enough for pagination, let the pagination number take the remaining number of records
* For example, if the pagination number is5Only remaining2Then only take2item
*
* There will be no problem if this is not written in the actual MySQL query
*/
if(sum - offset < size ){
size = sum - offset;
}
/*Use for loop to simulate SQL's limit(offset,size)*/
for(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);
/*******************************************/
/*Hide the 'more' button*/
if ( (offset + size) >= sum){
$('.js-load-more().hide();
}else{
$('.js-load-more().show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
It is still relatively simple.
Loading more based on scroll event
In the previous example, we achieved loading more through button clicks, which is a relatively simple process. Here, I provide another method to implement loading more: based on the scroll (scroll) event.
Here is the code directly pasted:
$(function(){
/*Initialization*/
var counter = 0; /*Counter*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size}}*/
var isEnd = false;/*End flag*/
/*First load*/
getData(pageStart, pageSize);
/*Listen to load more*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// When scrolling above the bottom100 pixels, load new content
// 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 + The logic inside ( (offset
if ( (offset + size) >= sum){
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 time2items or3items (size=2), Total records are20, 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:
The default method is to use scroll events to load more, and when the number of displayed items is too small to trigger the logic of loading more by scrolling down, use 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 include: 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-load-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; /*End flag*/ config.isAjax = false; /*Prevent scrolling too fast, causing multiple requests due to the server not responding in time*/ $(window).scroll(function(){ /*Whether to enable scroll loading*/ if(!config.scroll){ return; } /*When there is no more data to load and a request is in progress, you cannot continue scrolling to load*/ if(config.isEnd == true || config.isAjax == true){ return; } /*When scrolling above the bottom100 pixels, load new content*/ if ($(document).height() - $(this).scrollTop() - $(this).height() <100){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); } }); /*First automatic loading*/ callback && callback(config, pageStart, pageSize); }, } $.loadmore = loadmore; })(window, window.jQuery || window.Zepto);
How to use it? It's very simple:
$.loadmore.get(getData, {
scroll: true, //The default is false, whether to support scroll loading
size:7, //The default is10
flag: 1, //Custom parameters, optional, not used in the example
});
The first parameter is the callback function, which is our business logic. I post the final modified business logic method here:
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 = '';
/************Business logic block: Implement concatenation of html content and append it to the page*****************/
//console.log(offset, size, sum);
/*If the remaining number of records is not enough for pagination, let the pagination number take the remaining number of records
* For example, if the pagination number is5Only remaining2Then only take2item
*
* Do not write this in actual MySQL query
*/
if(sum - offset < size ){
size = sum - offset;
}
/*Use for loop to simulate SQL's limit(offset,size)*/
for(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);
/*******************************************/
/*Hide more*/
if ( (offset + size) >= sum){
$('.js-load-more().hide();
config.isEnd = true; /*Stop scrolling and loading requests*/
//提示没有了
}else{
$('.js-load-more().show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
That's all for this article. Hope it will be helpful to everyone's learning and also hope everyone will support the Yell Tutorial.
Statement: The content of this article is from the Internet, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright. It has not been edited by humans and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)