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瀑布流效果)的更多相关文章
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- RecyclerView实现瀑布流效果(图文详解+源码奉送)
最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- RecyclerView实现瀑布流效果(二)
在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutMan ...
- wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- Android UI 之WaterFall瀑布流效果
所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容. 语言描述比较抽象,具体效果看下面的截图: ...
随机推荐
- 学军中学第三届“图灵杯”趣味网络邀请赛——中级T4.欧拉回路 (图论,哈希)
题面 补题链接 7 5 6 7 1 2 3 3 13 5 30 50 10 30 70 8 题解 存在欧拉回路的条件是:1. 每个点的度数都是偶数.2. 有边的连通块最多一个. 数据范围是允许我们 n ...
- 从零开始搭建react基础开发环境(基于webpack5)
前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
- 在Apache Cassandra数据库软件中报告高严重性RCE安全漏洞
研究人员披露了ApacheCassandra一个现已修补的高严重性安全漏洞的细节,如果这个漏洞得不到解决,可能会被滥用来获取受影响安装的远程代码执行(RCE). DevOps公司JFrog的安全研究员 ...
- KingbaseES 支持列加密
KINGBASE 列加密支持 sm4 和 rc4 加密算法,具体算法在 initdb 时指定,默认是 sm4.要使用列加密,必须 shared_preload_libraries = 'sysencr ...
- Web 开发相关概念
Web 开发相关概念 前端 后端 全栈 前端 Front-end:网站中用户看到的部分 HTML CSS JavaScript 库和框架 设计工具 后端 Back-end:网站中用户看不到的部分 编程 ...
- Elastic: 创建一个 Elastic 邮件警报 - 7.7 发行版
文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/106185321 总结: 1.elastic 免费版只有发送警报到一个索引或者到Ser ...
- 实战---在Portainer中编排docker-compose.yml文件
选择要部署容器的主机上,不用事先安装配置docker-compose 官方示例文档地址,2.0版本的:https://docs.docker.com/compose/compose-file/comp ...
- 在 CentOS 8/RHEL 8 上安装和使用 Cockpit
Cockpit 是一个基于 Web 的服务器管理工具,可用于 CentOS 和 RHEL 系统.最近发布的 CentOS 8 和 RHEL 8,其中 cockpit 是默认的服务器管理工具.它的软件包 ...
- Git Review + Gerrit 安装及使用完成 Code-Review
转载自:https://cloud.tencent.com/developer/article/1010615 1.Code Review 介绍 Code Review 代码评审是指在软件开发过程中, ...
- 内网横向渗透 之 ATT&CK系列一 之 横向渗透域主机
前言 上一篇文章中已获取了关于域的一些基本信息,在这里再整理一下,不知道信息收集的小伙伴可以看回上一篇文章哦 域:god.org 域控 windows server 2008:OWA,192.168. ...