感覺一個人玩lol也沒意思了,玩會手機,看到這個下拉刷新功能就寫了這個demo!
這個demo寫的比較隨意,咱不能當做插件使用,基本思想是沒問題的,要用就自己封裝吧!
直接上代碼分析下吧!
布局:
<ul class="show-area" style="min-height:100px;"></ul> <button class='page-btn-nick' >加載更多</button>
就2行,只為實現功能,足矣!
js也不復雜,先定義2個變量,貫穿整個demo,進了不要全局變量,當然,封裝的時候也可以當做閉包參數!
var m=0,n=2;//m:button點擊次數 n:一次加載幾條數據
請求:
$.ajax('paging.html')
這裡我就寫的本頁面地址作為測試url。
下面請求成功後的處理就是重點了:
var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]} response=obj.developer;//假設請求到的數據是obj m++; var data='',elm=''; if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){ data=response.slice(n*(m-1)); $('.page-btn-nick').html('沒有更多了'); $('.page-btn-nick').attr('disabled','disabled'); }else{ data=response.slice(n*(m-1),n*m); }
中心思想:
請求按鈕點擊一次,m+1,講請求的數據拆分,只要需要的數據data;
data=response.slice(n*(m-1),n*m);
slice(s,e)函數獲取請求到的數據的一部分,s:response的起始位置,e結尾位置(取不到e位置的元素),返回值是一個含頭不含尾的數組。
這裡由於開始默認加載n條數據,m已經加了一次1了,所以要s和e要對應的改變;
將數據動態加載到頁面:
var len=data.length; for(var i= 0;i<len;i++){ elm+="<li>"+data[i].name+"</li>"; } $('.show-area').append(elm);
這裡的append()要比html()更優!
我看有些developer是勇的html(),這樣每加載一次,頁面中的所有li將全部清空,在重新加載所有的li,感覺每次加載都要加載有點多余的數據,浪費啊……
看上面的數據就知道,我是講每次請求的數據在slice()一次,在添加到頁面。這要寫我每加載一次,只把這次加載的數據append到ul的最後,以前的li並不會清空,這要加載的數據就是每次想要多加的必要數據,沒有重復添加,感覺給力點吧!
後面我把請求數據的getData()作為button點擊事件處理函數,同時放在判斷後的下拉事件中,就可以實現點擊按鈕動態加載數據和下拉刷新加載數據了!
最後附上完整代碼:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>paging nick</title> <style> </style> </head> <body> <ul class="show-area" style="min-height:100px;"></ul> <button class='page-btn-nick' >加載更多</button> <script src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script> <script> ;(function(){ getData(); var m=0,n=2;//m:button點擊次數 n:一次加載幾條數據 $('.page-btn-nick').click(getData); function getData(){ $.ajax('paging.html').then(function(response){//測試url寫本頁面 var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]} response=obj.developer;//假設請求到的數據是obj m++; var data='',elm=''; if(m>(response.length%n==0?response.length/n:parseInt(response.length/n))){ data=response.slice(n*(m-1)); $('.page-btn-nick').html('沒有更多了'); $('.page-btn-nick').attr('disabled','disabled'); }else{ data=response.slice(n*(m-1),n*m); } var len=data.length; for(var i= 0;i<len;i++){ elm+="<li>"+data[i].name+"</li>"; } $('.show-area').append(elm); },function(err){ console.log(err); }); } $(".show-area").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY; }); $(".show-area").on("touchmove", function(e) { e.preventDefault(); moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY; if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { alert("left 2 right"); } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { alert("right 2 left"); } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { alert("top 2 bottom"); getData(); } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { alert("bottom 2 top"); } else{ alert("just touch"); } }); }()); </script> </body> </html>
可以直接復制完整代碼,webstorm打開看看看,測試下吧!
移動端下拉事件就一筆帶過了,可以參考我寫的有關於移動化滑動事件的文章!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。