html5上拉页面分页显示

前端
 

 <script>

      //最大页数
      var mix = "";
      var currentPage = "";
      var pageSize = 5;
      //标识
      var pagenew = 1;
      //加载图片
      $.ajax({
          url:"/img/newImg",
          type:"post",
          data:{"currentPage":1,"pageSize":10},
          success:function (res) {
              mix=res.totalPage;
              $("#cardList").empty();
              $.each(res.list,function (n,i) {
                $("#cardList").append(" <div class=\"card\">\n" +
                    "          <a href=\"single.html\">\n" +
                    "          <img class=\"card-img-top probootstrap-animate\" src=\"/admin/accessorybag/attachments/images?mongoId="+i.mongo_id+"\" alt=\"Card image cap\" data-animate-effect=\"fadeIn\">\n" +
                    "          </a>\n" +
                    "        </div>");
              });
          }
      });


      $(function(){
          $(window).scroll(function () {
              if ($(document).height() - $(this).scrollTop() - $(this).height() < 300 && pagenew == 1) {
                  // alert("s");
                  pagenew = 2;
                  currentPage ++;
                  if(currentPage > mix){
                      return false;
                  }else{
                      ajaxpage(currentPage,pageSize);
                  }
              }
          });
      });

  </script>

  <script>
      function ajaxpage(currentPage,pageSize){
          $.ajax({
              url:"/img/newImg",
              type:"post",
              data:{"currentPage":currentPage,"pageSize":pageSize},
              success:function (res) {
                  console.log(res);
                  $.each(res.list,function (n,i) {
                      $("#cardList").append(" <div class=\"card img-loaded\">\n" +
                          "          <a href=\"single.html\">\n" +
                          "          <img class=\"card-img-top probootstrap-animate fadeIn probootstrap-animated\" src=\"/admin/accessorybag/attachments/images?mongoId="+i.mongo_id+"\" alt=\"Card image cap\" data-animate-effect=\"fadeIn\">\n" +
                          "          </a>\n" +
                          "        </div>");
                  });
                  pagenew = 1;
              }
          });
      }
  </script>

后端：

@RequestMapping("newImg")
    @ResponseBody
    public MybatisBaseQuery newImg(@RequestParam(value = "currentPage")Integer currentPage,@RequestParam(value = "pageSize")Integer pageSize){
        Integer totalNum=imgService.totalNum();
        MybatisBaseQuery mybatisBaseQuery=new MybatisBaseQuery();
        mybatisBaseQuery.setBaseQueryInfo(currentPage,pageSize,totalNum);
        List<Map<String,Object>> maps=imgService.newImg(mybatisBaseQuery.getStartNum(),mybatisBaseQuery.getPageSize());
        mybatisBaseQuery.setList(maps);
        return mybatisBaseQuery;
    }

MybatisBaseQuery 为分页显示工具类。可以参考另一篇获取：https://blog.csdn.net/qq_31293575/article/details/93198770

后端返回格式为：

currentPage: 6
endNum: 30
list: (5) [{…}, {…}, {…}, {…}, {…}]
pageSize: 5
searchKey: null
startNum: 25
totalPage: 94
__proto__: Object

完整原文：http://blog.maptoface.com/post/181