jQuery nach unten schieben, um die nächste Seite mit Datenbeispielerklärungen zu laden

In diesem Artikel wird hauptsächlich der Beispielcode von jQuery vorgestellt, der nach unten verschoben wird, um die nächste Seite mit Daten zu laden. Ich hoffe, er kann allen helfen.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<script>page_num =page_num+1 ; //页码自动增加，保证下次调用时为新的一页。
      $.ajax({
        type: "get",  
        url: rent_url, 
        data: &#39;2&#39;,
        dataType: "json",
        success: function (data) {
//          查询到的数据总数
          rentDataNum = data.count
//         每页加载6个 需要加载的页数 
          rentDataPagge = Math.ceil(rentDataNum/6);
          $(".loadp").hide();
//         返回信息的长度 大于0 则调用函数 把加载的数据通过html的形式 追加到视图中 
          if (data.houses.length > 0) {
            insertp(data.houses,rentDataPagge,pagenumber);
          }
        },
        beforeSend: function () {
          $(".loadp").show();
        },
        error: function (data) {
          $(".loadp").hide();
        }
      });
    }
    //初始化加载第一页数据
      getData(1);
    //生成数据html,append到p中
    function insertp(data,page_num,pagenumber) {
      var $mainp = $(".er_list");
      var result = &#39;&#39;;
      if (pagenumber<=page_num){
        for (var i = 0; i < data.length; i++) {
          var houe_title   =  data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name;
          result +=&#39;<li>&#39;;
          result +=&#39;<a href="#" rel="external nofollow" >&#39;
          result +=&#39;<p class="img_left"><img src=&#39;+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+&#39;></p>&#39;
          result +=&#39;<p class="img_con">&#39;
          result +=&#39;<h5>&#39;+houe_title+&#39;</h5>&#39;
          result +=&#39;<p class="ting">&#39;+data[i].bedroom+&#39; 室&#39;+ data[i].livingroom+&#39; 厅1卫<span>·</span>&#39;+data[i].buildarea+&#39; ㎡<span>·</span>东南</p>&#39;
          result +=&#39;<p class="info">&#39;+data[i].district_name+&#39;</p>&#39;
          result +=&#39;<p class="tag">&#39;
          result +=&#39;<em class="yell_01">不限购</em><em class="yell_02">近地铁</em><em class="yell_03">满两年</em><em class="yell_04">满两年</em>&#39;
          result +=&#39;</p>&#39;
          result +=&#39;<p class="jia"><p>&#39;+data[i].price+&#39; </p><span>123 /㎡</span></p>&#39;
          result +=&#39;</p>&#39;
          result +=&#39;</a>&#39;
          result +=&#39;</li>&#39;;
        }
        $mainp.append(result);
        // 如果加载完数据则 删除等待加载时的图片
        if (pagenumber==page_num){
          $("p").remove(&#39;#loadings&#39;)
        }
      }
    }
    //==============核心代码=============
    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 (page_num<=rentDataPagge+1){
          // 滑动到地部 调用函数 加载数据
          getData(page_num);
        }
      }
    }
    //定义鼠标滚动事件
    $(window).scroll(scrollHandler);
    //==============核心代码=============
    //继续加载按钮事件
    $("#btn_Page").click(function () {
      getData(page_num);
      $(window).scroll(scrollHandler);
    });
  });
  </script>

Verwandte Empfehlungen:

JS einfache Implementierung der gleitenden Ladedaten-Beispielfreigabe

Antworten auf das Problem, dass die Seite beim Laden von Ajax-Daten kurzzeitig leer erscheint

jquery lädt einzelne Datei-Vue-Komponentenmethodenfreigabe

Das obige ist der detaillierte Inhalt vonjQuery nach unten schieben, um die nächste Seite mit Datenbeispielerklärungen zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!