js實(shí)現(xiàn)加載更多功能實(shí)例
項(xiàng)目的一個(gè)前端頁(yè)面展示已購(gòu)買(mǎi)商品時(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實(shí)現(xiàn)圖片切換（動(dòng)畫(huà)版）
本文主要對(duì)javascript實(shí)現(xiàn)圖片切換（動(dòng)畫(huà)版）的方法進(jìn)行步驟分析、實(shí)例介紹，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
有時(shí)候我們?cè)谑褂肅anvas繪制一段文本時(shí)，會(huì)需要通過(guò)measureText()方法獲取文本的寬度，本文主要介紹了在小程序Canvas中使用measureText的方法示例，需要的朋友可以參考下2018-10-10
JavaScript圖片的Base64編碼以及轉(zhuǎn)換詳解
現(xiàn)在網(wǎng)站為了提升用戶的瀏覽體驗(yàn)越來(lái)越多的使用了圖片,而這些圖片通常以 Base64 的形式存儲(chǔ)和加載,下面這篇文章主要給大家介紹了關(guān)于JavaScript圖片的Base64編碼以及轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2022-07-07
我要點(diǎn)爆”微信小程序云開(kāi)發(fā)之項(xiàng)目建立與我的頁(yè)面功能實(shí)現(xiàn)
這篇文章主要介紹了我要點(diǎn)爆”微信小程序云開(kāi)發(fā)之項(xiàng)目建立與我的頁(yè)面功能實(shí)現(xiàn)，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)放大鏡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過(guò)這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法2022-10-10
Javascript實(shí)現(xiàn)元素選擇器功能
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)元素選擇器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)?lái)一篇xcode中獲取js文件的路徑方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
利用JS自動(dòng)打開(kāi)頁(yè)面上鏈接的實(shí)現(xiàn)代碼
今天經(jīng)過(guò)測(cè)試，實(shí)現(xiàn)了利用JS來(lái)自動(dòng)打開(kāi)頁(yè)面上的鏈接的功能，其實(shí)比較簡(jiǎn)單，就是在頁(yè)面上把鏈接列表列出來(lái)，然后通過(guò)JQuery的相關(guān)控制，在框架頁(yè)中把鏈接打開(kāi)，具體能做什么用，大家自己想，哈哈。2011-09-09
js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10