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("加载数据异常,请稍后再试!");

				}

			});

	}

后台代码：接口需要自己写，略

最终效果图：

巴特西

springboot滚动分页展示列表（类似layui瀑布流效果）

背景：

实现：

最新文章

热门文章