DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> pc加載更多功能和移動端下拉刷新加載數據
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打開看看看,測試下吧!

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved