js實現載入更多的功能
關於如何實現『載入更多』功能,網上有外掛可用,例如比較著名的使用iscroll.js實現的上拉載入更多、下拉重新整理功能。
但實際用起來卻是很麻煩。由於是第三方外掛,要按照對方定義的方法使用,用起來總感覺很不順心。再加上iscroll.js本身並沒有整合載入更多的功能,需要進行自行擴充套件。想繼續使用iscroll.js實現載入更多功能的,上面給的連結可以看看。
h5專案裡需要實現簡單的分頁功能,由於是移動端,考慮用『載入更多』會更好,而不是PC端的翻頁。
基於按鈕實現載入更多
最簡單的就是給一個載入更多的按鈕,如果還有資料,點選下載入更多,繼續拉幾條資料;直到沒有更多資料了,隱藏載入更多按鈕。
這裡提前準備好資料。
演示資料格式:blog.json
{
"list": [
{
"title": "這是title",
"url": "http://www.cnblogs.com/52fhy/p/5271447.html",
"desc": "摘要"
},
{
"title": "這是title2",
"url": "http://www.cnblogs.com/52fhy/p/4823390.html",
"desc ": "摘要"
}]
}
頁面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;/*預設不顯示,ajax呼叫成功後才決定顯示與否*/
}
載入更多的js程式碼:
$(function(){
/*初始化*/
var counter = 0; /*計數器*/
var pageStart = 0; /*offset*/
var pageSize = 4; /*size*/
/*首次載入*/
getData(pageStart, pageSize);
/*監聽載入更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
這裡的程式碼並不多。其中getData(pageStart, pageSize)
是業務邏輯程式碼,負責從服務端拉去資料。這裡給個示例:
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 = '';
/****業務邏輯塊:實現拼接html內容並append到頁面*********/
//console.log(offset , size, sum);
/*如果剩下的記錄數不夠分頁,就讓分頁數取剩下的記錄數
* 例如分頁數是5,只剩2條,則只取2條
*
* 實際MySQL查詢時不寫這個不會有問題
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for迴圈模擬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!');
}
});
}
還是比較簡單的。
基於滾動事件實現載入更多
上面我們通過按鈕點選實現載入更多,整體過程還是比較簡單的。這裡,我提供另一種方法實現載入更多:基於於滾動(scroll
)事件。
直接貼程式碼了:
$(function(){
/*初始化*/
var counter = 0; /*計數器*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size*/
var isEnd = false;/*結束標誌*/
/*首次載入*/
getData(pageStart, pageSize);
/*監聽載入更多*/
$(window).scroll(function(){
if(isEnd == true){
return;
}
// 當滾動到最底部以上100畫素時, 載入新內容
// 核心程式碼
if ($(<span class="hljs-built_in">document</span>).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
可以看出,程式碼變化不大,主要看核心程式碼裡的判斷條件:當滾動到最底部以上100畫素時, 載入新內容。
業務邏輯getData(pageStart, pageSize)
只需要把if ( (offset + size) >= sum)
裡面的邏輯改成:
if ( (offset + size) >= sum){
isEnd = true;//沒有更多了
}
就行了。
當然,這裡面還有要優化的地方,例如:
如何防止滾動過快,服務端沒來得及響應造成多次請求?
綜合例項
通過上面的例子,顯然第二種更好,不用去點選。但是第二個方法有個問題:
如果設定頁面大小每次顯示2條或3條(size=2),總記錄是20,你會發現無法觸發向下滾動載入更多的邏輯。這時候有個載入更多的點選按鈕就好了。
因此,我們可以把以上兩種方法合在一起:
預設使用滾動事件實現載入更多,當顯示數目太小不足以觸發向下滾動載入更多的邏輯時,使用載入更多點選事件。
DEMO : 綜合例項
這裡,我對載入更多這個行為進行簡單的抽象,寫了個簡單的外掛:
loadmore.js
/*
* loadmore.js
* 載入更多
*
* @time 2016-4-18 17:40:25
* @author 飛鴻影~
* @email [email protected]
* 可以傳的引數預設有:size,scroll 可以自定義
* */
;(function(w,$){
var loadmore = {
/*單頁載入更多 通用方法
*
* @param callback 回撥方法
* @param config 自定義引數
* */
get : function(callback, config){
var config = config ? config : {}; /*防止未傳引數報錯*/
var counter = 0; /*計數器*/
var pageStart = 0;
var pageSize = config.size ? config.size : 10;
/*預設通過點選載入更多*/
$(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
});
/*通過自動監聽滾動事件載入更多,可選支援*/
config.isEnd = false; /*結束標誌*/
config.isAjax = false; /*防止滾動過快,服務端沒來得及響應造成多次請求*/
$(window).scroll(function(){
/*是否開啟滾動載入*/
if(!config.scroll){
return;
}
/*滾動載入時如果已經沒有更多的資料了、正在發生請求時,不能繼續進行*/
if(config.isEnd == true || config.isAjax == true){
return;
}
/*當滾動到最底部以上100畫素時, 載入新內容*/
if ($(<span class="hljs-built_in">document</span>).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自動載入*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);
如何使用呢?很簡單:
$.loadmore.get(getData, {
scroll: true, //預設是false,是否支援滾動載入
size:7, //預設是10
flag: 1, //自定義引數,可選,示例裡沒有用到
});
第一個引數是回撥函式,即我們的業務邏輯。我把最終修改過的業務邏輯方法貼出來:
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 = '';
/************業務邏輯塊:實現拼接html內容並append到頁面*****************/
//console.log(offset , size, sum);
/*如果剩下的記錄數不夠分頁,就讓分頁數取剩下的記錄數
* 例如分頁數是5,只剩2條,則只取2條
*
* 實際MySQL查詢時不寫這個
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for迴圈模擬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; /*停止滾動載入請求*/
//提示沒有了
}else{
$(".js-load-more").show();
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
基本上與最初寫的是一樣的。
– 全文完 –
相關推薦
js實現載入更多功能例項
這篇文章主要介紹了js實現載入更多功能的方法,以例項演示了載入更多的程式碼實現,非常具有實用價值,需要的朋友可以參考下 專案的一個前端頁面展示已購買商品時,要求能下拉載入更多。關於如何實現『載入更多』功能,網上有外掛可用,例如比較著名的使用iscro
js實現載入更多的功能
關於如何實現『載入更多』功能,網上有外掛可用,例如比較著名的使用iscroll.js實現的上拉載入更多、下拉重新整理功能。 但實際用起來卻是很麻煩。由於是第三方外掛,要按照對方定義的方法使用,用起來總感覺很不順心。再加上iscroll.js本身並沒有整合載入更多的功能,需要進行自行擴充套件。想繼續使用isc
使用Angularjs jQuery在手機上實現滑動條到底自動載入更多功能
關鍵詞:directive infiniteScroll infiniteScrollDistance infiniteScrollDisabled $window.on $window.off在網上查了很多相關技術,在電腦瀏覽器上能正常的實現自動載入更多功能,但是放到手機AP
載入更多 功能的實現
傳送ajax請求,獲取資料。判斷code狀態。通過模板引擎渲染的頁面。根據服務端資料的總條數判斷是否 顯示載入更多 按鈕。 程式碼 1 <script src="./static/assets/vendors/jquery/jquery.js"></script>
繼承SwipeRefreshLayout實現上拉載入更多功能
Android 的SwipeRefreshLayout是一個比較好的下拉重新整理控制元件,現在已經有越來越多的企業開始使用這個控制元件了。但是遺憾的是這個控制元件並沒有上拉載入更多的功能,所以自己抽空,根據網上已有的例子,自己寫了一個。 首先必須要做的是建立一個類繼承SwipeRefresh
jQuery+Asp.net 實現簡單的下拉載入更多功能
原來做過的商城專案現在需要增加下拉載入的功能,簡單的實現了一下。大概可以整理一下思路跟程式碼。 把需要下拉載入的內容進行轉為JSON處理存在當前頁面: <script type="text/javascript">var objson = eval([{"Id":"5991","produ
載入更多功能實現
實現點選載入更多按鈕,以及上拉載入更多資料 import React from 'react' import PureRenderMixin from 'react-addons-pure-render-mixin' import { getLis
RecyclerView實現底部載入更多功能
這兩天在公司沒有什麼任務分配,就研究了下咱們Google在Android5.0 推出的一個用來代替ListView的列表控制元件----RecyclerView。發現功能上確實比ListView強大了不少,可擴充套件性也增強了不少。但是使用過RecyclerVie
自定義ListView下拉重新整理上拉載入更多功能
本篇的自定義listview包含下拉重新整理和上拉載入更多都是自定義。如果你想把重新整理的圖片做的更炫只需要更換下圖片加上適當的動畫就OK咯!由於沒有合適的圖片就用了個粗糙的。不好看請見諒。 //部分程式碼(都做了註釋): /** * @author: ZQF_
gedit 可以實現的更多功能外掛
有時候在Linux上使用基於GUI的程式,你必須在程式視窗和命令列視窗之間切換。這會消耗一些時間。將一個終端視窗嵌入到程式視窗內部是個很好的解決方案。我不知道在其他程式是否可以,但是,如果你為gedit尋找一個這樣的解決方案,那麼這兒有一個外掛-- Embedded Term
通過ajax請求實現載入更多——常見的問題
這裡tity主要給大家講兩個問題: 一是載入中動畫,二是關於“沒有更多了”的判斷。 一、載入中動畫,可以增強使用者體驗度,給使用者一種當前頁面正在處理的感覺,而不是沒有任何反應,讓使用者感覺摸不著頭腦。 實現方法:在ajax請求中新增beforeSend方
jquery實現載入更多
<pre name="code" class="javascript">很簡單的程式碼,下面直接是簡單的應用例子: $(window).scroll(function () {
js_原生js實現上拉載入更多的功能。
1 //--------------上拉載入更多--------------- 2 //獲取滾動條當前的位置 3 function ge
js實現『載入更多』功能例項 & 點選列表跳轉到詳情頁(tap)
寫在前面: 實際操作過程中,因為要用ajax去請求很多次資料,所以效能方面肯定會打折扣,拼接資料也是很麻煩,對於列表資料比較多的情況,寫起來不方便,也不好修改維護,不過功能實現很完整,我正在考慮去看看Vue裡面不用修改v-for嘗試著讓它在陣列上面做文章。 h5專案裡需要實現簡單的分頁功
jq實現點選載入更多分頁功能
頁面上實現類似於下拉載入更多的功能,這種是點選載入更多 。 大致思路是: 首先Ajax獲取到下一頁內容,返回json格式資料,如果是跨域請求可以用jsonp返回,通過jq的append()到某個元素後面 此時分頁的page+1,可以在“載入更多”按鈕上把總頁數和當前
vue基於mint-ui元件loadmore實現上拉載入更多,下拉重新整理功能
這個是模擬手機寫的簡單樣式,不要在意這些細節,為了撐滿容器每次載入十二 那就開始程式碼了 ==》 先安裝 mint-ui 在main.js中引入mint-ui的css樣式: import 'mint-ui/lib/style.css' 在
第一次嘗試用BaseRecyclerViewAdapterHelper實現上拉重新整理、載入更多、新增頭佈局、尾佈局等等功能
BaseRecyclerViewAdapterHelper 簡介: 減少重複 Adapter 程式碼 新增 Item 的點選事件,長按事件以及子控制元件的點選事件 新增頭部、尾部,下拉重新整理、上拉載入(上拉載入的5種載入更多動畫任你選擇,後期會新增更多的載入動畫)、沒有更多
js如何實現上拉載入更多...
我們在專案中經常使用到下拉載入更多,之前要麼是底部寫載入按鈕,要麼是引入外掛。今天終於有時間手寫一個了,之前感覺挺麻煩,明白原理後,其實很簡單... scrollTop:滾動視窗的高度距離window頂部的距離,它會隨著往上滾動而不斷增加,初始值是0,它是一個變化的值; clientHeight:它是一
js程式碼實現“文章載入更多”
這裡提前準備好資料。 演示資料格式:blog.json { "list": [ { "title": "這是title", "u
下拉載入更多DEMO(js實現)
專案的一個前端頁面展示已購買商品時,要求能下拉載入更多。花了點時間研究這個功能,以前沒做過。 首先需要給div加scroll事件,監聽滾動條滾動動作。那何時觸發載入動作呢?當滾動條滾到底的時候。如何判斷滾動條滾到底呢? 當滾動條的高度加上滾動條到div