移動端下滑刷新插件(jQuery插件)
題外話：好久沒寫過博客了，感覺還是在校園的舒服。感覺實習都很累，一天負責得好多事情。不過值得炫耀的是，以前上大一時候，某老師拿出他們企業的項目，說這個項目單純源代碼就1個G。當時覺得，這麽大的項目，肯定很多人一起做並且花費許多時間。現在出來實習了兩個月，獨自從前端到後臺，都獨自敲了上G的代碼，覺得當時是沒見過。而且現在一個人就承擔公司大部分的業務，感覺還是不錯的。
好了，回到話題，由於不能獨自開發，而且為了給他們方便，自己寫過不少的插件，不過今天剛好空閑，發出剛好完成的，移動端的下滑到底刷新插件。我不是很喜歡寫插件給別人用，因為用起來自然是簡單的，沒什麽難度，所以一起分享下設計思路。
關鍵在數據傳送部分，樣式可以自由定義，再帶到插件中用，插件中使用到別處的加載插件(layer插件，蠻好用的，推薦個廣告~)
首先，看下demo（只是簡單的，沒有帶樣式，讀者自己寫樣式，帶到裏面使用）：
使用方式：（傳送數據，我只寫了json格式，數據是json格式，如果需要用到排序或者別的需求，可以帶上data參數，一並上傳到後臺的）
var load; $(‘#list‘).paging({ //從後臺接收數據 url: "/WebSite1/Test.aspx?action=test", //每頁大小 size: 20, //單項模板 model 用 { *** }方式，並且跟後臺傳到前臺的json對象中必須是一致的名字 temp: "<div style=‘width:100%;height:50px;‘>姓名:{ Name } 學號{ No }</div>",//在提交前執行方法，可以用於顯示加載中狀態 before: function () { load = layer.load(1); }, //不管在單次結束時候回調方法，可以用於結束當前加載中狀態 over: function () { layer.close(load); }, //過濾器，在獲取的每行數據，可以自定義修改填充數據，必須跟後臺傳到前臺json一致的名字 filter: { Name: function (data) {return "<a onclick=‘alert(\"" + data + "\");‘>" + data + "</a>"; } }, //在所有數據加載完成時候觸發，判斷數據是否結束的依據是當前獲取數據的數目 是否大於 每頁的大小 pageover: function () { $(‘#isover‘).html(‘加載結束‘); } //next是翻下一頁，一開始時候必須這樣，加載一次，後邊可以自己控制加載，或者在後邊加上pageload，就可以滑到底部時候，自動加載數據了 }).next().pageload();
效果:
先上js代碼
//手機端往下移動加載更多 (function($,window){ $.fn.paging = function(obj){ this.bpage = obj; //默認開始第一頁 this.bpage.currentpage = 1; //每頁大小 默認5 this.bpage.size = this.bpage.size || 5; //是否是第一次加載 this.bpage.isfirst = true; //當返回的總數小於頁大小時候，就是結束時候 this.bpage.isover = false; //判斷是否能加載數據 this.bpage.flag = true; //清空當前的list列表頁內容 this.html(‘‘); $.pagingreg = /\{\s*([^\{\}\s]+)\s*\}/g; //$.pagingreg = /\{\s*([^\{\}]+)\s*\}/g; //翻頁 this.next = function(){ this.bpage.flag = false; this.bpage.isfirst = false; //在加載時候執行，可以顯示狀態加載中 if(this.bpage.before){ this.bpage.before(); } if(!this.bpage.data){ this.bpage.data = {}; } var _this = this; $.ajax({ url:_this.bpage.url, data:$.extend(true, obj.data, { size:_this.bpage.size, current:_this.bpage.currentpage, }), type:_this.bpage.type || ‘post‘, dataType : _this.bpage.dataType || ‘json‘, success:function(data){ //後臺傳給前臺數據必須在 data.Data中 //alert(data); var da = data.Data; var str = ""; for(var i = 0;i<da.length;i++){ var temp = _this.bpage.temp; //填充數據 var match = $.pagingreg.exec(_this.bpage.temp); while(match){ if(_this.bpage.filter && _this.bpage.filter[match[1]]){ //用戶可以自定義數據 temp = temp.replace(match[0],_this.bpage.filter[match[1]](da[i][match[1]]),da[i]); }else{ temp = temp.replace(match[0],da[i][match[1]]); } //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){ _this.bpage.success(); } if(_this.bpage.over){ _this.bpage.over(); } if(da.length < _this.bpage.size){ _this.bpage.isover = true; //結束時候執行 if(_this.bpage.pageover){ //分頁獲取數據完全結束時候執行 _this.bpage.pageover(); } } _this.bpage.flag = true; }, error:function(){ //錯誤時候執行 if(_this.bpage.error){ _this.bpage.error(); } if(_this.bpage.over){ _this.bpage.over(); } } }); return this; }; //ready綁定滾動事件 this.pageload = function(){ var _this = this; $(window).scroll(function () { if (_this.bpage.flag) { if ($(document).scrollTop() >= $(document).height() - $(window).height()) { if (!_this.bpage.isover) { if(!_this.bpage.isfirst){ _this.next(); } } } } }); }; return this; }; })(jQuery,window);
講解下制作的思路：
其實下滑加載，只是一個分頁，加上前臺的配合而已。
想要獲取到分頁的數據，首先，前臺傳到後臺需要的基本參數：當前的頁數和每頁的大小數。
因此，在這個插件中，在當前的jquery對象中，保存了這兩個對象，因為每一頁大小，可以由用戶自己定義，所以，在設置每頁大小時候，先判斷用戶有沒有自己定義了。
還有，所需要的其他參數是，判斷是否結束的參數，這個其實就是一個標記，根據獲取數據的數目大小和當前的每頁大小來判斷是否結束。
最後，還有一個很重要的正則表達式，是用於匹配模板中的要填充的地方，看過大部分的框架，其實很多字符串匹配，基本是用正則表達式。
paging 其實只是初始化，並還沒加載數據，這時候將一些關鍵的參數初始化。
主要功能在next中，其實說完上邊的參數，應該大概就知道是怎樣的，在next中，因為在插件中，一定要有些操作，比如加載狀態的切換，還有當數據不滿足自己的使用，需要額外的方法。
第一個就是berofe，在提交之前，可以從源碼中看到，很簡單的。
提交中，也就是把所需要的參數放上去就可以了，jquery本身封裝就很好。
在data中，比較特殊，因為有可能有用戶自己定義的上傳的數據，所以這裏使用jquery的將兩個對象合並。
在獲取完數據，其實這個插件是前臺控制後臺的頁數和大小，所以後臺其實除了數據，不需要其他內容到前臺的。
不過，從後臺傳前臺的數據，一定要要將數組數據放在 Data中，我固定了它，獲取數據從返回json對象中的Data中拿的，下面遍歷也是從這開始。
最主要的功能，遍歷並填充數據：
一開始時候，用戶將模板放在temp中。那在循環中，將它拿出來，並且使用正則式的匹配，自動的將 { *** } 格式的篩選出來，篩選出來，先判斷用戶有沒有filter對象，在filter對象中有沒有使用對數據的過濾，過濾的方法有兩個參數，第一個是當前列的數據，第二個是當前行的所有數據。這樣就能顯示很多復雜的數據，這樣也就增加了靈活性。
好了，大部分功能就實現了。
在每一行讀取數據時候，先會去匹配是否當前的對象在filter中有
後邊就是結束時候的回調方法。
看下實際項目中的使用，不過數據不多。只有一行。主要演示filter功能：
json對象:
{ "State": 0, "Content": null, "Data": [ { "id": 1, "sex": 0, "phone": "123", "qq_wx": "123", "teachaddress": "中國福建", "memo": "哈哈", "teachersex": 0, "teachermemo": "哈哈", "name": "mcg", "grade": { "id": 1, "gradename": "一年級", "cover": "", "delstate": 0, "createdate": null }, "subject": { "id": 1, "subjectname": "英語", "createdate": null, "delstate": 0 }, "time": { "id": 1, "teachdate": "一周兩次，一次2個小時", "delstate": 0, "createdate": null }, "createtime": "/Date(1503127735000)/" } ] }
比較復雜的對象，然後在前臺使用:
<script src="~/Scripts/page.js"></script> <script type="text/javascript"> var load; $(‘#studentlist‘).paging({ url: "/Student/getStudentsList", //每頁大小 size: 10, //填充的模板 每個item項 裏面對象和後臺傳到前臺數據必須一致，並且使用 { *** } 方式使用，存放數據必須在 Data對象下，可參照後臺數據。其他可自定義 temp: "<div class=‘content-student-list-item‘>" +"<p style=‘text-align: left;‘><span>訂單編號:</span>{ id }</p>" + "<p><span>求教科目:</span>{ subject }</p>" + "<p><span>學員要求:</span>{ teachersex } { teachermemo }</p>" + "<p><span>學員情況:</span>{ sex } { grade } { memo }</p>" + "<p><span>授課地址:</span>{ teachaddress }</p>" + "<p><span>報酬:</span>￥110元</p><p><span>發布時間:</span>{ createtime }</p></div>", //在獲取數據前回調，可以顯示加載中等操作 before: function () { load = layer.load(1); }, //不管有沒有成功的獲取數據，在提交獲取結束都會執行 ，可以用於結束加載 over: function () { layer.close(load); }, filter: { subject: function (data) { return data.subjectname; }, teachersex: function (data) { if (data == -1) { return ‘不限‘; } else if (data == 0) { return ‘男‘; } else { return ‘女‘; } }, sex: function (data) { return data == 0 ? "男" : "女"; }, grade: function (data) { return data.gradename; }, createtime: function (data) { return $.jsonDateFormatA(data); } } }).next().pageload(); </script>
,，就可以顯示出各式各樣的數據
解釋了之後，是不是覺得其實很簡單，這樣寫完，使用起來也是很便捷。
最後，還有個滑動到底部刷新方法，只需要調用pageload方法，裏面其實將滾動到底部的方法裏添加執行next的翻頁方法，就可以實現了，很簡單的下滑刷新功能。
好了，今天就到這吧。
移動端下滑刷新插件(jQuery插件)