pc載入更多功能和移動端下拉重新整理載入資料_javascript技巧

感覺一個人玩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開啟看看看，測試下吧！

移動端下拉事件就一筆帶過了，可以參考我寫的有關於移動化滑動事件的文章！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。