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瀑布流效果
所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容. 语言描述比较抽象,具体效果看下面的截图: ...
随机推荐
- CF-1562B- Scenes From a Memory
Problem - 1562B - Codeforces 题意:给定一个字符串,每次操作可以选择这个字符串中的一种字符,将他们全部都减1,最多K次操作,问可以形成的字典大小最小的字符串. 题解:首先我 ...
- 再谈NULL和nullptr(C++11)区别
在谈NULL和nullptr区别之前,我们先看段代码: #include "stdafx.h" #include <iostream> using namespace ...
- spark 读取hive 计算后写入hive
package com.grady import org.apache.spark.SparkConf import org.apache.spark.sql.{DataFrame, Row, Spa ...
- Java 9.回文数
给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false .回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 例如,121 是回文,而 123 不是. ...
- 安装配置docker&maven环境
原文视频:(https://blog.sechelper.com/20220919/code-review/docker-maven-install-guid/) Docker是什么 Docker ...
- 基于 OpenTelemetry 的链路追踪
链路追踪的前世今生 分布式跟踪(也称为分布式请求跟踪)是一种用于分析和监控应用程序的方法,尤其是使用微服务架构构建的应用程序.分布式跟踪有助于精确定位故障发生的位置以及导致性能差的原因. 起源 链路追 ...
- 升级openssl和openssh脚本
#!/bin/bash # 原先的版本号信息 # openssl version #OpenSSL 1.0.2k-fips 26 Jan 2017 # ssh -V #OpenSSH_7.4p1, O ...
- Keepalived + Nginx 实现高可用 Web 负载均衡
一.Keepalived 简要介绍 Keepalived 是一种高性能的服务器高可用或热备解决方案, Keepalived 可以用来防止服务器单点故障的发生,通过配合 Nginx 可以实现 web 前 ...
- 1_requests基础用法
requests模块的基本使用 什么是requests模块? Python中封装好的一个基于网络请求的模块 requests模块的作用? 用来模拟浏览器发请求 requests模块的环境安装: pip ...
- MySQL学习(3)---MySQL常用命令
ps:此随笔基于mysql 5.7.*版本. 准备 net start mysql 启动MySQL服务 net stop mysql 关闭MySQL服务 mysql [-h<IP地址>] ...