js實(shí)現(xiàn)加載更多功能實(shí)例
項(xiàng)目的一個(gè)前端頁(yè)面展示已購(gòu)買商品時(shí)，要求能下拉加載更多。關(guān)于如何實(shí)現(xiàn)『加載更多』功能，網(wǎng)上有插件可用，例如比較著名的使用iscroll.js實(shí)現(xiàn)的上拉加載更多、下拉刷新功能。
但實(shí)際用起來(lái)卻是很麻煩。由于是第三方插件，要按照對(duì)方定義的方法使用，用起來(lái)總感覺(jué)很不順心。再加上iscroll.js本身并沒(méi)有集成加載更多的功能，需要進(jìn)行自行擴(kuò)展。想繼續(xù)使用iscroll.js實(shí)現(xiàn)加載更多功能的，上面給的鏈接可以看看。
h5項(xiàng)目里需要實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能，由于是移動(dòng)端，考慮用『加載更多』會(huì)更好，而不是PC端的翻頁(yè)。
基于按鈕實(shí)現(xiàn)加載更多
最簡(jiǎn)單的就是給一個(gè)加載更多的按鈕，如果還有數(shù)據(jù)，點(diǎn)擊下加載更多，繼續(xù)拉幾條數(shù)據(jù)；直到?jīng)]有更多數(shù)據(jù)了，隱藏加載更多按鈕。
效果如下：
頁(yè)面html：
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
<!--加載更多按鈕-->
<div class="js-load-more">加載更多</div>
</div>
<script src="js/zepto.min.js"></script>
加載更多按鈕樣式：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;/*默認(rèn)不顯示，ajax調(diào)用成功后才決定顯示與否*/
}
加載更多的js代碼：
$(function(){
/*初始化*/
var counter = 0; /*計(jì)數(shù)器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次加載*/
getData(pageStart, pageSize);
/*監(jiān)聽(tīng)加載更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
這里的代碼并不多。其中g(shù)etData(pageStart, pageSize)是業(yè)務(wù)邏輯代碼，負(fù)責(zé)從服務(wù)端拉去數(shù)據(jù)。這里給個(gè)示例：
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 = '';
/****業(yè)務(wù)邏輯塊：實(shí)現(xiàn)拼接html內(nèi)容并append到頁(yè)面*********/
//console.log(offset , size, sum);
/*如果剩下的記錄數(shù)不夠分頁(yè)，就讓分頁(yè)數(shù)取剩下的記錄數(shù)
* 例如分頁(yè)數(shù)是5，只剩2條，則只取2條
*
* 實(shí)際MySQL查詢時(shí)不寫(xiě)這個(gè)不會(huì)有問(wèn)題
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循環(huán)模擬SQL里的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);
/*******************************************/
/*隱藏more按鈕*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
還是比較簡(jiǎn)單的。
基于滾動(dòng)事件實(shí)現(xiàn)加載更多
上面我們通過(guò)按鈕點(diǎn)擊實(shí)現(xiàn)加載更多，整體過(guò)程還是比較簡(jiǎn)單的。這里，我提供另一種方法實(shí)現(xiàn)加載更多：基于于滾動(dòng)(scroll)事件。
直接貼代碼了：
$(function(){
/*初始化*/
var counter = 0; /*計(jì)數(shù)器*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size*/
var isEnd = false;/*結(jié)束標(biāo)志*/
/*首次加載*/
getData(pageStart, pageSize);
/*監(jiān)聽(tīng)加載更多*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// 當(dāng)滾動(dòng)到最底部以上100像素時(shí)， 加載新內(nèi)容
// 核心代碼
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
可以看出，代碼變化不大，主要看核心代碼里的判斷條件：當(dāng)滾動(dòng)到最底部以上100像素時(shí)， 加載新內(nèi)容。
業(yè)務(wù)邏輯getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的邏輯改成：
if ( (offset + size) >= sum){
isEnd = true;//沒(méi)有更多了
}
就行了。
當(dāng)然，這里面還有要優(yōu)化的地方，例如：如何防止?jié)L動(dòng)過(guò)快，服務(wù)端沒(méi)來(lái)得及響應(yīng)造成多次請(qǐng)求？
綜合實(shí)例
通過(guò)上面的例子，顯然第二種更好，不用去點(diǎn)擊。但是第二個(gè)方法有個(gè)問(wèn)題：
如果設(shè)置頁(yè)面大小每次顯示2條或3條(size=2)，總記錄是20，你會(huì)發(fā)現(xiàn)無(wú)法觸發(fā)向下滾動(dòng)加載更多的邏輯。這時(shí)候有個(gè)加載更多的點(diǎn)擊按鈕就好了。
因此，我們可以把以上兩種方法合在一起：
默認(rèn)使用滾動(dòng)事件實(shí)現(xiàn)加載更多，當(dāng)顯示數(shù)目太小不足以觸發(fā)向下滾動(dòng)加載更多的邏輯時(shí)，使用加載更多點(diǎn)擊事件。
這里，我對(duì)加載更多這個(gè)行為進(jìn)行簡(jiǎn)單的抽象，寫(xiě)了個(gè)簡(jiǎn)單的插件：
loadmore.js
/*
* loadmore.js
* 加載更多
*
* @time 2016-4-18 17:40:25
* @author 飛鴻影~
* @email jiancaigege@163.com
* 可以傳的參數(shù)默認(rèn)有：size,scroll 可以自定義
* */
;(function(w,$){
var loadmore = {
/*單頁(yè)加載更多 通用方法
*
* @param callback 回調(diào)方法
* @param config 自定義參數(shù)
* */
get : function(callback, config){
var config = config ? config : {}; /*防止未傳參數(shù)報(bào)錯(cuò)*/
var counter = 0; /*計(jì)數(shù)器*/
var pageStart = 0;
var pageSize = config.size ? config.size : 10;
/*默認(rèn)通過(guò)點(diǎn)擊加載更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
});
/*通過(guò)自動(dòng)監(jiān)聽(tīng)滾動(dòng)事件加載更多,可選支持*/
config.isEnd = false; /*結(jié)束標(biāo)志*/
config.isAjax = false; /*防止?jié)L動(dòng)過(guò)快，服務(wù)端沒(méi)來(lái)得及響應(yīng)造成多次請(qǐng)求*/
$(window).scroll(function(){
/*是否開(kāi)啟滾動(dòng)加載*/
if(!config.scroll){
return;
}
/*滾動(dòng)加載時(shí)如果已經(jīng)沒(méi)有更多的數(shù)據(jù)了、正在發(fā)生請(qǐng)求時(shí)，不能繼續(xù)進(jìn)行*/
if(config.isEnd == true || config.isAjax == true){
return;
}
/*當(dāng)滾動(dòng)到最底部以上100像素時(shí)， 加載新內(nèi)容*/
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自動(dòng)加載*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);
如何使用呢？很簡(jiǎn)單：
$.loadmore.get(getData, {
scroll: true, //默認(rèn)是false,是否支持滾動(dòng)加載
size:7, //默認(rèn)是10
flag: 1, //自定義參數(shù)，可選，示例里沒(méi)有用到
});
第一個(gè)參數(shù)是回調(diào)函數(shù)，即我們的業(yè)務(wù)邏輯。我把最終修改過(guò)的業(yè)務(wù)邏輯方法貼出來(lái)：
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 = '';
/************業(yè)務(wù)邏輯塊：實(shí)現(xiàn)拼接html內(nèi)容并append到頁(yè)面*****************/
//console.log(offset , size, sum);
/*如果剩下的記錄數(shù)不夠分頁(yè)，就讓分頁(yè)數(shù)取剩下的記錄數(shù)
* 例如分頁(yè)數(shù)是5，只剩2條，則只取2條
*
* 實(shí)際MySQL查詢時(shí)不寫(xiě)這個(gè)
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循環(huán)模擬SQL里的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);
/*******************************************/
/*隱藏more*/
if ( (offset + size) >= sum){
$(".js-load-more").hide();
config.isEnd = true; /*停止?jié)L動(dòng)加載請(qǐng)求*/
//提示沒(méi)有了
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了幾種JS的動(dòng)態(tài)效果實(shí)例，有需要的朋友可以參考一下2013-07-07
使用JavaScript的ActiveXObject對(duì)象檢測(cè)應(yīng)用程序是否安裝的方法
這篇文章主要介紹了使用JavaScript的ActiveXObject對(duì)象檢測(cè)應(yīng)用程序是否安裝的方法,需要的朋友可以參考下2014-04-04
計(jì)算機(jī)系統(tǒng)并不是通過(guò)文件的后綴名來(lái)判斷文件類型,而是通過(guò)文件簽名來(lái)判斷,下面這篇文章主要給大家介紹了關(guān)于JavaScript判斷文件類型三種方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能
這篇文章主要為大家詳細(xì)介紹了bootstrap布局中input輸入框右側(cè)圖標(biāo)點(diǎn)擊功能實(shí)現(xiàn)的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
Locate a File Using a File Open Dialog Box
Locate a File Using a File Open Dialog Box...2007-06-06
這篇文章主要介紹了JavaScript避免嵌套代碼，很多時(shí)候需要編寫(xiě)的邏輯本身就很惡心, 乍看之下, 堆頁(yè)巖般的判定嵌套里似乎每一層都是必要的, 也只能說(shuō)盡量讓它看起來(lái)不那么惡心2023-02-02
當(dāng)input元素還未插入文檔流之前，是可以修改它的值的，在ie和ff下都沒(méi)問(wèn)題。但如果input已經(jīng)存在于頁(yè)面，其type屬性在ie下就成了只讀屬性了，不可以修改2013-10-10
uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript實(shí)現(xiàn)的文字加密解密
javascript實(shí)現(xiàn)的文字加密解密...2007-06-06
uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12