項(xiàng)目的一個(gè)前端頁面展示已購買商品時(shí)，要求能下拉加載更多。關(guān)于如何實(shí)現(xiàn)『加載更多』功能，網(wǎng)上有插件可用，例如比較著名的使用iscroll.js實(shí)現(xiàn)的上拉加載更多、下拉刷新功能。
但實(shí)際用起來卻是很麻煩。由于是第三方插件，要按照對(duì)方定義的方法使用，用起來總感覺很不順心。再加上iscroll.js本身并沒有集成加載更多的功能，需要進(jìn)行自行擴(kuò)展。想繼續(xù)使用iscroll.js實(shí)現(xiàn)加載更多功能的，上面給的鏈接可以看看。
h5項(xiàng)目里需要實(shí)現(xiàn)簡(jiǎn)單的分頁功能，由于是移動(dòng)端，考慮用『加載更多』會(huì)更好，而不是PC端的翻頁。
基于按鈕實(shí)現(xiàn)加載更多
最簡(jiǎn)單的就是給一個(gè)加載更多的按鈕，如果還有數(shù)據(jù)，點(diǎn)擊下加載更多，繼續(xù)拉幾條數(shù)據(jù)；直到?jīng)]有更多數(shù)據(jù)了，隱藏加載更多按鈕。
效果如下：
頁面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)聽加載更多*/ $(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到頁面*********/ //console.log(offset , size, sum); /*如果剩下的記錄數(shù)不夠分頁，就讓分頁數(shù)取剩下的記錄數(shù) * 例如分頁數(shù)是5，只剩2條，則只取2條 * * 實(shí)際MySQL查詢時(shí)不寫這個(gè)不會(huì)有問題 */ 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)加載更多
上面我們通過按鈕點(diǎn)擊實(shí)現(xiàn)加載更多，整體過程還是比較簡(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)聽加載更多*/ $(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;//沒有更多了}就行了。
當(dāng)然，這里面還有要優(yōu)化的地方，例如：如何防止?jié)L動(dòng)過快，服務(wù)端沒來得及響應(yīng)造成多次請(qǐng)求？
綜合實(shí)例
通過上面的例子，顯然第二種更好，不用去點(diǎn)擊。但是第二個(gè)方法有個(gè)問題：
如果設(shè)置頁面大小每次顯示2條或3條(size=2)，總記錄是20，你會(huì)發(fā)現(xiàn)無法觸發(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)單的抽象，寫了個(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 = { /*單頁加載更多 通用方法 * * @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)通過點(diǎn)擊加載更多*/ $(document).on('click', '.js-load-more', function(){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); }); /*通過自動(dòng)監(jiān)聽滾動(dòng)事件加載更多,可選支持*/ config.isEnd = false; /*結(jié)束標(biāo)志*/ config.isAjax = false; /*防止?jié)L動(dòng)過快，服務(wù)端沒來得及響應(yīng)造成多次請(qǐng)求*/ $(window).scroll(function(){ /*是否開啟滾動(dòng)加載*/ if(!config.scroll){ return; } /*滾動(dòng)加載時(shí)如果已經(jīng)沒有更多的數(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ù)，可選，示例里沒有用到});第一個(gè)參數(shù)是回調(diào)函數(shù)，即我們的業(yè)務(wù)邏輯。我把最終修改過的業(yè)務(wù)邏輯方法貼出來：
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到頁面*****************/ //console.log(offset , size, sum); /*如果剩下的記錄數(shù)不夠分頁，就讓分頁數(shù)取剩下的記錄數(shù) * 例如分頁數(shù)是5，只剩2條，則只取2條 * * 實(shí)際MySQL查詢時(shí)不寫這個(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)求*/ //提示沒有了 }else{ $(".js-load-more").show(); } }, error: function(xhr, type){ alert('Ajax error!'); } });}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
