手机h5 滑动 下一页

 <script type="text/javascript"> 
 
      $(function () {
              var all = 10;  //后台返回总页面
              var pageNum = 1;//定义初始页面
              var pageSize = 10;  // 每页显示的个数
              var close = true;  // 因为ajax是异步请求,所以设置一个boolean类型,将ajax控制为同步请求
              $(window).scroll(function() {
                  var scrollTop = $(this).scrollTop();      //计算已经卷进去滚动条的的高度
                  var scrollHeight = $(document).height();  //当前页面的总高度
                  var windowHeight = $(this).height();      //当前window也就是浏览器的高度
                  if(parseInt(scrollTop) + parseInt(windowHeight) == parseInt(scrollHeight)) {
                      // 如果class为true 并且当前页数小于或等于总页数
                      if (close && pageNum <= all) {
                          pageNum += 1;
                          //将close改为false,无法在请求后台
                          close = false;
                          $.ajax({
                              url:'',   // 请求地址
                              data:{
                                  pageNum:pageNum,
                                  pageSize:pageSize
                              },
                              type:"post",
                              dataType:'html',
                              success:function (res) {
                                  // 根据id或class 将返回的页面拼接到页面
                                  $('.list').append(res);
                                  // 请求成功后将close改回true
                                  close = true;
                              }
                          });
                      } else {
                          return false;
                      }
                  }
              });
          });

</script>	

在这里插入图片描述

你可能感兴趣的:(javascript,ajax,手机端)