背景:

公司项目要求获取用户关联的好友列表,要求分页查询,十条数据一页,滚动页面是点击加载更多,显示下一页列表。

示例图:

实现:

本项目采用的前端模板是freemaker,主要前端页面代码(没有附css文件)如下:

  1. <div class="middle-menu" style="margin: 0.3rem;">
  2. <div id="tab1" class="middle-menu1 " onclick="changeTab(1)">已添加好友</div>
  3. <div id="tab2" class="middle-menu2 " onclick="changeTab(2)">好友标签</div>
  4. </div>
  5. <div class="card-list-friend" id="noneToShow_1">
  6. <div class="feedback-box p-t-67">
  7. <img src="${mainDomain}/static/images/empty2.png" class="feedback-img" style="width: 3rem;" />
  8. <p class="feedback-text">暂无数据</p>
  9. </div>
  10. </div>
  11. <div class="card-list-friend" id="allCustShowDiv">
  12. </div>
  13. <div class="more-center-btn" id="allCustLoadMoreDiv" onclick="loadAllCustList();" style="display: none;">
  14. <i class="iconfont"></i><span>点击加载更多</span>
  15. </div>
  16. <div class="more-center-btn" id="allCustLoadRemark" style="display: none;">
  17. <i class="iconfont"></i><span>已显示全部好友</span>
  18. </div>
  19. </div>

显示效果如下:

js代码:

  1. // 全部好友页数
  2. var commonPage1 = 1;
  3. // 每页展示10个
  4. var pageSize = 10;
  5. //默认选中的标签页
  6. var itemIndex = 1;
  7. //初始化
  8. $(function () {
  9. //进入页面就开始查询列表
  10. loadAllCustList();
  11. })
  12. //分页获取好友页表
  13. function loadAllCustList(){
  14. $.ajax({
  15. type: 'POST',
  16. url: '${mainDomain}/friend/myFriendList?page=' + commonPage1 + '&size=' + pageSize,
  17. dataType: 'json',
  18. success: function (res) {
  19. //获取数据
  20. if (res.success) {
  21. var resInfo = res.data.list;
  22. var count = res.data.count;
  23. var showHtml = '';
  24. if (count != 0 && resInfo.length != 0) {
  25. for (let item of resInfo) {
  26. showHtml += '' +
  27. '<div class="card">' +
  28. '<img src="${mainDomain}/static/images/person5.png" class="friend-avatar"/>' +
  29. '<div>' +
  30. '<div class="friend-name">微信昵称:' + item.followUserRemark +
  31. '</div>' +
  32. '<div class="friend-telephone">手机号:' + item.followUserRemarkMobiles +
  33. '</div>' +
  34. '</div>' +
  35. '</div>';
  36. }
  37. //隐藏默认的暂无数据页面
  38. $("#noneToShow_1").hide();
  39. //将查询的列表添加到页面上
  40. $("#allCustShowDiv").append(showHtml);
  41. }
  42. //显示加载更多标签
  43. $("#allCustLoadMoreDiv").show();
  44. //如果已经没有多余的,就将加载更多隐藏
  45. if (resInfo.length < pageSize || pageSize * commonPage1 >= count) {
  46. $("#allCustLoadMoreDiv").hide();
  47. if (resInfo.length != 0) {
  48. $("#allCustLoadRemark").show();
  49. }
  50. }
  51. //页码+1
  52. commonPage1++;
  53. } else {
  54. console.log("加载数据失败,请稍后再试");
  55. }
  56. },
  57. error: function (xhr, type) {
  58. console.log("加载数据异常,请稍后再试!");
  59. }
  60. });
  61. }

后台代码:接口需要自己写,略

最终效果图:

springboot滚动分页展示列表(类似layui瀑布流效果)的更多相关文章

  1. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  2. RecyclerView实现瀑布流效果(图文详解+源码奉送)

    最近有时间研究了一下RecyclerView,果然功能强大啊,能实现的效果还是比较多的,那么今天给大家介绍一个用RecyclerView实现的瀑布流效果. 先来一张效果图: 看看怎么实现吧: 整体工程 ...

  3. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  4. RecyclerView实现瀑布流效果(二)

    在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutMan ...

  5. wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  6. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  7. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  8. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  9. Android UI 之WaterFall瀑布流效果

        所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容.     语言描述比较抽象,具体效果看下面的截图:   ...

随机推荐

  1. CF-1562B- Scenes From a Memory

    Problem - 1562B - Codeforces 题意:给定一个字符串,每次操作可以选择这个字符串中的一种字符,将他们全部都减1,最多K次操作,问可以形成的字典大小最小的字符串. 题解:首先我 ...

  2. 再谈NULL和nullptr(C++11)区别

    在谈NULL和nullptr区别之前,我们先看段代码: #include "stdafx.h" #include <iostream> using namespace ...

  3. spark 读取hive 计算后写入hive

    package com.grady import org.apache.spark.SparkConf import org.apache.spark.sql.{DataFrame, Row, Spa ...

  4. Java 9.回文数

    给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false .回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数.    例如,121 是回文,而 123 不是. ...

  5. 安装配置docker&maven环境

     原文视频:(https://blog.sechelper.com/20220919/code-review/docker-maven-install-guid/) Docker是什么 Docker ...

  6. 基于 OpenTelemetry 的链路追踪

    链路追踪的前世今生 分布式跟踪(也称为分布式请求跟踪)是一种用于分析和监控应用程序的方法,尤其是使用微服务架构构建的应用程序.分布式跟踪有助于精确定位故障发生的位置以及导致性能差的原因. 起源 链路追 ...

  7. 升级openssl和openssh脚本

    #!/bin/bash # 原先的版本号信息 # openssl version #OpenSSL 1.0.2k-fips 26 Jan 2017 # ssh -V #OpenSSH_7.4p1, O ...

  8. Keepalived + Nginx 实现高可用 Web 负载均衡

    一.Keepalived 简要介绍 Keepalived 是一种高性能的服务器高可用或热备解决方案, Keepalived 可以用来防止服务器单点故障的发生,通过配合 Nginx 可以实现 web 前 ...

  9. 1_requests基础用法

    requests模块的基本使用 什么是requests模块? Python中封装好的一个基于网络请求的模块 requests模块的作用? 用来模拟浏览器发请求 requests模块的环境安装: pip ...

  10. MySQL学习(3)---MySQL常用命令

    ps:此随笔基于mysql 5.7.*版本. 准备 net start mysql 启动MySQL服务 net stop mysql 关闭MySQL服务 mysql [-h<IP地址>] ...