pc加載更多功能和移動端下拉刷新加載數(shù)據(jù)

更新時(shí)間：2016年11月07日 08:31:31 作者：webNick

這篇文章主要為大家詳細(xì)介紹了pc加載更多功能和移動端下拉刷新加載數(shù)據(jù),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

感覺一個(gè)人玩lol也沒意思了，玩會手機(jī)，看到這個(gè)下拉刷新功能就寫了這個(gè)demo！

這個(gè)demo寫的比較隨意，咱不能當(dāng)做插件使用，基本思想是沒問題的，要用就自己封裝吧！

直接上代碼分析下吧！

布局：

<ul class="show-area" style="min-height:100px;"></ul>
<button class='page-btn-nick' >加載更多</button>

就2行，只為實(shí)現(xiàn)功能，足矣！

js也不復(fù)雜，先定義2個(gè)變量，貫穿整個(gè)demo，進(jìn)了不要全局變量，當(dāng)然，封裝的時(shí)候也可以當(dāng)做閉包參數(shù)！

var m=0,n=2;//m:button點(diǎn)擊次數(shù) n:一次加載幾條數(shù)據(jù)

請求：

$.ajax('paging.html')

這里我就寫的本頁面地址作為測試url。

下面請求成功后的處理就是重點(diǎn)了：

     var obj={developer:[{name:'nick'},{name:'ljy'},{name:'xzl'},{name:'jeson'},{name:'yst'},{name:'zhw'},{name:'wqq'}]}
     response=obj.developer;//假設(shè)請求到的數(shù)據(jù)是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);
     }

中心思想：

請求按鈕點(diǎn)擊一次，m+1，講請求的數(shù)據(jù)拆分，只要需要的數(shù)據(jù)data；

data=response.slice(n*(m-1),n*m);

slice(s,e)函數(shù)獲取請求到的數(shù)據(jù)的一部分，s：response的起始位置，e結(jié)尾位置（取不到e位置的元素），返回值是一個(gè)含頭不含尾的數(shù)組。

這里由于開始默認(rèn)加載n條數(shù)據(jù)，m已經(jīng)加了一次1了，所以要s和e要對應(yīng)的改變；

將數(shù)據(jù)動態(tài)加載到頁面：

     var len=data.length;
     for(var i= 0;i<len;i++){
      elm+="<li>"+data[i].name+"</li>";
     }
     $('.show-area').append(elm);

這里的append()要比html()更優(yōu)！

我看有些developer是勇的html()，這樣每加載一次，頁面中的所有l(wèi)i將全部清空，在重新加載所有的li，感覺每次加載都要加載有點(diǎn)多余的數(shù)據(jù)，浪費(fèi)啊……

看上面的數(shù)據(jù)就知道，我是講每次請求的數(shù)據(jù)在slice()一次，在添加到頁面。這要寫我每加載一次，只把這次加載的數(shù)據(jù)append到ul的最后，以前的li并不會清空，這要加載的數(shù)據(jù)就是每次想要多加的必要數(shù)據(jù)，沒有重復(fù)添加，感覺給力點(diǎn)吧！

后面我把請求數(shù)據(jù)的getData()作為button點(diǎn)擊事件處理函數(shù)，同時(shí)放在判斷后的下拉事件中，就可以實(shí)現(xiàn)點(diǎn)擊按鈕動態(tài)加載數(shù)據(jù)和下拉刷新加載數(shù)據(jù)了！

最后附上完整代碼：

<!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點(diǎn)擊次數(shù) n:一次加載幾條數(shù)據(jù)
   $('.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;//假設(shè)請求到的數(shù)據(jù)是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>

可以直接復(fù)制完整代碼，webstorm打開看看看，測試下吧！

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: