springboot滚动分页展示列表(类似layui瀑布流效果)
背景:
公司项目要求获取用户关联的好友列表,要求分页查询,十条数据一页,滚动页面是点击加载更多,显示下一页列表。
示例图:
实现:
本项目采用的前端模板是freemaker,主要前端页面代码(没有附css文件)如下:
<div class="middle-menu" style="margin: 0.3rem;">
<div id="tab1" class="middle-menu1 " onclick="changeTab(1)">已添加好友</div>
<div id="tab2" class="middle-menu2 " onclick="changeTab(2)">好友标签</div>
</div>
<div class="card-list-friend" id="noneToShow_1">
<div class="feedback-box p-t-67">
<img src="${mainDomain}/static/images/empty2.png" class="feedback-img" style="width: 3rem;" />
<p class="feedback-text">暂无数据</p>
</div>
</div>
<div class="card-list-friend" id="allCustShowDiv">
</div>
<div class="more-center-btn" id="allCustLoadMoreDiv" onclick="loadAllCustList();" style="display: none;">
<i class="iconfont"></i><span>点击加载更多</span>
</div>
<div class="more-center-btn" id="allCustLoadRemark" style="display: none;">
<i class="iconfont"></i><span>已显示全部好友</span>
</div>
</div>
显示效果如下:
js代码:
// 全部好友页数
var commonPage1 = 1;
// 每页展示10个
var pageSize = 10;
//默认选中的标签页
var itemIndex = 1;
//初始化
$(function () {
//进入页面就开始查询列表
loadAllCustList();
})
//分页获取好友页表
function loadAllCustList(){
$.ajax({
type: 'POST',
url: '${mainDomain}/friend/myFriendList?page=' + commonPage1 + '&size=' + pageSize,
dataType: 'json',
success: function (res) {
//获取数据
if (res.success) {
var resInfo = res.data.list;
var count = res.data.count;
var showHtml = '';
if (count != 0 && resInfo.length != 0) {
for (let item of resInfo) {
showHtml += '' +
'<div class="card">' +
'<img src="${mainDomain}/static/images/person5.png" class="friend-avatar"/>' +
'<div>' +
'<div class="friend-name">微信昵称:' + item.followUserRemark +
'</div>' +
'<div class="friend-telephone">手机号:' + item.followUserRemarkMobiles +
'</div>' +
'</div>' +
'</div>';
}
//隐藏默认的暂无数据页面
$("#noneToShow_1").hide();
//将查询的列表添加到页面上
$("#allCustShowDiv").append(showHtml);
}
//显示加载更多标签
$("#allCustLoadMoreDiv").show();
//如果已经没有多余的,就将加载更多隐藏
if (resInfo.length < pageSize || pageSize * commonPage1 >= count) {
$("#allCustLoadMoreDiv").hide();
if (resInfo.length != 0) {
$("#allCustLoadRemark").show();
}
}
//页码+1
commonPage1++;
} else {
console.log("加载数据失败,请稍后再试");
}
},
error: function (xhr, type) {
console.log("加载数据异常,请稍后再试!");
}
});
}
后台代码:接口需要自己写,略
最终效果图: