由於在工作不能獨自開發，而且為了給他們方便，自己寫過不少的外掛程式，不過今天剛好空閒，發出剛好完成的，移動端的下滑到底重新整理外掛程式。我不是很喜歡寫外掛程式給別人用，因為用起來自然是簡單的，沒什麼難度，所以一起分享下設計思路。
關鍵在資料傳送部分，樣式可以自由定義，再帶到外掛程式中用，外掛程式中使用到別處的載入外掛程式(layer外掛程式，蠻好用的，推薦個廣告~)
首先，看下demo（只是簡單的，沒有帶樣式，讀者自己寫樣式，帶到裡面使用）：
使用方式：（傳送資料，我只寫了json格式，資料是json格式，如果需要用到排序或者別的需求，可以帶上data引數，一併上傳到後台的）
var效果:load;
$('#list').paging(方式，並且跟後台傳到前台的json物件中必須是一致的名字
temp: "姓名: 學號
",
//在提交前執行方法，可以用於顯示載入中狀態
before: function
() ,
//不管在單次結束時候**方法，可以用於結束當前載入中狀態
over: function
() ,
//過濾器，在獲取的每行資料，可以自定義修改填充資料，必須跟後台傳到前台json一致的名字
filter:
},//在所有資料載入完成時候觸發，判斷資料是否結束的依據是當前獲取資料的數目 是否大於 每頁的大小
pageover: function
()
// }).next().pageload();
先上js**
//講解下製作的思路：手機端往下移動載入更多
(function
($,window)\s]+)\s*\}/g;
//$.pagingreg = /\]+)\s*\}/g;
//翻頁
this.next = function
()
if(!this
.bpage.data);
}var _this = this
; $.ajax(),
type:_this.bpage.type || 'post',
datatype : _this.bpage.datatype || 'json',
success:
function
(data)
else
//alert("'"+match[1]+"'");
match =$.pagingreg.exec(_this.bpage.temp);
}//alert(temp);
str +=temp;
}//顯示在頁面上
_this.html(_this.html()+str);
_this.bpage.currentpage++;
//成功的**
if(_this.bpage.success)
if(_this.bpage.over)
if(da.length <_this.bpage.size>
}_this.bpage.flag = true
; },
error:
function
()
if(_this.bpage.over)
}});
return
this
; };
//ready繫結滾動事件
this.pageload = function
() }}}
});};
return
this
; };
})(jquery,window);
其實下滑載入，只是乙個分頁，加上前台的配合而已。
想要獲取到分頁的資料，首先，前台傳到後台需要的基本引數：當前的頁數和每頁的大小數。
因此，在這個外掛程式中，在當前的jquery物件中，儲存了這兩個物件，因為每一頁大小，可以由使用者自己定義，所以，在設定每頁大小時候，先判斷使用者有沒有自己定義了。
還有，所需要的其他引數是，判斷是否結束的引數，這個其實就是乙個標記，根據獲取資料的數目大小和當前的每頁大小來判斷是否結束。
最後，還有乙個很重要的正規表示式，是用於匹配模板中的要填充的地方，看過大部分的框架，其實很多字串匹配，基本是用正規表示式。
paging 其實只是初始化，並還沒載入資料，這時候將一些關鍵的引數初始化。
主要功能在next中，其實說完上邊的引數，應該大概就知道是怎樣的，在next中，因為在外掛程式中，一定要有些操作，比如載入狀態的切換，還有當資料不滿足自己的使用，需要額外的方法。
第乙個就是berofe，在提交之前，可以從原始碼中看到，很簡單的。
提交中，也就是把所需要的引數放上去就可以了，jquery本身封裝就很好。
在data中，比較特殊，因為有可能有使用者自己定義的上傳的資料，所以這裡使用jquery的將兩個物件合併。
在獲取完資料，其實這個外掛程式是前台控制後台的頁數和大小，所以後台其實除了資料，不需要其他內容到前台的。
不過，從後台傳前台的資料，一定要要將陣列資料放在 data中，我固定了它，獲取資料從返回json物件中的data中拿的，下面遍歷也是從這開始。
最主要的功能，遍歷並填充資料：
一開始時候，使用者將模板放在temp中。那在迴圈中，將它拿出來，並且使用正則式的匹配，自動的將 格式的篩選出來，篩選出來，先判斷使用者有沒有filter物件，在filter物件中有沒有使用對資料的過濾，過濾的方法有兩個引數，第乙個是當前列的資料，第二個是當前行的所有資料。這樣就能顯示很多複雜的資料，這樣也就增加了靈活性。
好了，大部分功能就實現了。
在每一行讀取資料時候，先會去匹配是否當前的物件在filter中有
後邊就是結束時候的**方法。
看下實際專案中的使用，不過資料不多。只有一行。主要演示filter功能：
json物件:
,比較複雜的物件，然後在前台使用: ,，就可以顯示出各式各樣的資料"subject
": ,
"time
": ,
"createtime
": "
/date(1503127735000)/"}]}
解釋了之後，是不是覺得其實很簡單，這樣寫完，使用起來也是很便捷。
最後，還有個滑動到底部重新整理方法，只需要呼叫pageload方法，裡面其實將滾動到底部的方法裡新增執行next的翻頁方法，就可以實現了，很簡單的下滑重新整理功能。
好了，今天就到這吧。
移動端下拉滾動重新整理
clientheight 視口 viewport 的高度，就是我們在瀏覽器中所能看到內容的高度 screenheight 螢幕高度，實際移動裝置的螢幕高度。scrollheight 真實內容的高度 scrolltop 視窗上面隱藏掉的部分。真實內容高度 視窗高度 上面隱藏的高度 20，作為載入的觸發...
詳解vue移動端 下拉重新整理
說這個功能之前，大家要先了解一下，要怎麼觸發滾動條事件。一定要注意，所有滾動事件都必須要滿足這個條件，橫向滾動條也一樣，只要滿足子元素寬度大於父元素寬度就可以了。下篇文章會講怎麼實現乙個橫向滾動條 先來看看怎麼剖析這個下拉重新整理。要用到的移動端的三個事件 touchstart 手指按下 touch...
移動端下拉重新整理，向後台請求資料
首先說明，下拉重新整理有兩種情況 一，重新重新整理整個頁面.window.location.reload 這種方式也可以做到，前提是進入頁面也是直接從後台取資料，這種方法較簡單 二，下拉後不重新整理頁面，只是向後台傳送ajax請求，這種情況就複雜點，會存在服務端返回資料重複的情況，這個時候一般需要服...