jQuery 移動端ajax請求列表數據，實現點擊翻頁效果（還有手勢往下滑動翻頁）。

1 首先是html部分

 

<div class="content">
　　<div class="list"></div>  //list 是放ajax請求的列表

      <input type="hidden" id="pageNum">   //pageNum 為記錄當前請求接口數據的頁碼

　　<div class="more">點擊加載更多記錄</div>   //more 控制點擊換頁
</div>

 

2 jQuery實現部分

假設接口返回數據結構如下(我是本地模擬了一個json文件code.json)

json文件的數據模式

{
  "data":{
      "data":[
          {
          "id":0,
          "name":"zhaomei"
        },{
              "id":1,
              "name":"zhaomei1"
          },{
              "id":2,
              "name":"zhaomei2"
          },{
              "id":3,
              "name":"zhaomei3"
          },{
              "id":4,
              "name":"zhaomei4"
          },{
              "id":5,
              "name":"zhaomei5"
          },{
          "id":6,
          "name":"zhaomei6"
        },{
          "id":7,
          "name":"zhaomei7"
        },{
          "id":8,
          "name":"zhaomei8"
        },{
          "id":9,
          "name":"zhaomei9"
        }
      ],
      "page":{
          "currentPage":1,
          "totalPage":5
      }
  } ,
  "code":0
}

 

 

代碼實現如下

（本來是從實際的兩個項目中采摘過來的，但是覺得還是要本地測試下才妥當，所以在本地服務器中實際測試了下，果然還是有很多坑）

$(function(){  //頁面加載完成后執行
    var load=false; // load為判斷接口是否請求完成,防止多次觸摸、多次點擊導致接口的多次請求出錯
    getData(1,"code.json"); //初始化數據從第一頁數據開始請求
    function getData(page,url){  //請求接口的方法，方法帶page，url兩個參數。
        $('.more').text('正在加載中...');
        $.ajax({
            url:url,  //請求接口的url
            type : 'post',//請求方式（post或get）默認為get
            async: true,  //默認情況下是true表示所有請求為異步請求，如果要為同步則用false
            cache:false,//默認為false，設置為false將不會從瀏覽器緩存中加載請求信息。
            /* 
            dataType選項的值有以下6個，但是一般接口都是返回json格式就用json；
            1、"xml"：返回 XML 文檔，可用 jQuery 處理。
            2、"html":：返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行。
            3、"script":：返回純文本JavaScript 代碼。不會自動緩存結果，除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標簽來加載）
            4、"json": 返回 JSON 數據 。
            5、"jsonp": JSONP 格式。使用JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數，經常被用來同主域名下不同二級域名下的跨域請求。
            6、"text": 返回純文本字符串。*/
            dataType : "json",
            data:{
                /*page : page, //data里面放實際接口請求的參數,要求為Object或String類型的參數，這里是本地測試就不帶參數了*/
            },
            success : function(data){  //請求成功調用的回調函數
                var list=data.data;
                if(data.code == 0){
                    if (list.data.length>0) {
                        $("#pagenum").val(parseInt(list.page.currentPage)+1);
                        console.log(222433)
                          showList(list);
                        if (list.page.currentPage>=list.page.totalPage) { //這里判斷接口數據是否到底部
                            load=true;
                            $(".more").html('已經到底了');
                        }else if(list.page.currentPage<list.page.totalPage) {
                            load=false;
                            $(".more").html('查看更多');
                        }
                   }
                }
            },
            error : function(error){ //請求失敗調用的回調函數
                console.log(error);
            }
        });
    }
    //函數采用函數聲明方式可以在任意位置調用，而不采用函數字變量的寫法（如var showList=function(){}）,由於函數自變量的寫法雖然函數會提升，但是沒實際的作用只能在函數后面調用，不利於函數的全局調用
      
    function showList(data){   //顯示列表的html內容
        var ullist = '';
        $.each(data.data,function(i,n){
             ullist+='<ul>'+
                        '<li>111'+n.id+'</li>'+
                        '<li>'+n.name+'</li>'+
                     '</ul>';
        })
        $('.list').append(ullist);
    }

    //繼續加載按鈕事件  ，點擊按鈕后請求換頁的數據
    $(document).on("click",'.more',function(){  
        if(load==false) {
            load=true;
            page=$("#pagenum").val();
            getData(page,url); 
        }
    }) 


    //==============核心代碼=============  
    //鼠標向下滾動加載下一頁數據，或者移動端向下滑動加載下一頁數據
    var winH = $(window).height(); //頁面可視區域高度   
  
    var scrollHandler = function () {  
        var pageH = $(document.body).height();  
        var scrollT = $(window).scrollTop(); //滾動條top   
        var aa = (pageH - winH - scrollT) / winH;
        if (aa < 0.02) {//0.02是個參數 
            if(load==false) {
                load=true;
                page=$("#pagenum").val();
                getData(page,url); 
            }
            
        }  
    }
     //定義鼠標滾動事件  
    $(window).scroll(scrollHandler);  
})

 

有什么問題歡迎留言交流~

大概就這樣啦，用jQuery對接列表接口。