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