jQuery glisse vers le bas pour charger la page suivante d'explication de l'exemple de données

Cet article présente principalement l'exemple de code de jQuery glissant vers le bas pour charger la page de données suivante. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Sans plus attendre, je publierai le code directement pour vous. Le code spécifique est le suivant :

<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>

Recommandations associées :

Implémentation simple en JS du partage d'exemples de données de chargement coulissant

Réponses au problème selon lequel la page apparaît brièvement vide lors du chargement des données Ajax

Chargement jquery Partage de méthode de composant de vue de fichier unique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!