jquery使用infinitescroll无线滚动+自定义翻页
jquery版本 jquery-1.8.3.js
infinitescroll版本 2.0.0
如果infinitescroll版本最新的jquery版本也要用新的
接口用nodejs
jquery.infinitescroll.js官网地址
前端代码《接口返回JSON数据》
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无限滚动加载</title><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.in_scroll {width: 150px;margin: 0 auto;border: 1px solid blue;padding: 0px 2px;box-sizing: border-box;}.item {width: 100%;height: 100px;font-size: 30px;line-height: 100px;text-align: center;border: 1px solid gray;margin-top: 2px;box-sizing: border-box;}#infscr-loading{text-align: center;}</style>
</head>
<body><div style="height: 300px;"></div><!--infinteId是最外层的元素，所有加载的内容都会放在这个元素内--><div class="in_scroll" id='infinteId'><!--这是显示的每个条目的内容，保证都有一个共同的class属性，不必是item--><!-- <div class="item">1</div> --></div><div id="page-nav" class="hidden"><!--在最后，要加上一个导航，每次滚到底部，就会触发这个url去加载数据--><a href="http://127.0.0.1:8888/api/getDataJ?page=2"></a></div></body>
<script src="../js/jquery-1.8.3.js"></script>
<script src="../js/jquery.infinitescroll.dev.js"></script>
<script>var page = 1$(function () {var url = "http://127.0.0.1:8888/api/getDataJ?page=1";$.ajax({type: "get",url: url,cache: false,beforeSend: function (XMLHttpRequest) {// $(".loading").show();},success: function (data, textStatus) {var dataArr = data.datavar innerHtml = ''for (let i = 0; i < dataArr.length; i++) {innerHtml += '<div class="item">' + dataArr[i] + '</div>'}$('#infinteId').append(innerHtml);page = data.currPage$('#infinteId').infinitescroll({navSelector: '#page-nav', // selector for the paged navigation nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)itemSelector: '.item', // selector for all items you'll retrievedebug: true,loading: {finishedMsg: '已经到底了！亲',img: '../img/ajaxs.gif',msgText: '努力加载中...'},dataType: 'json',//可以是jsontemplate: function(data) {//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数page = data.currPageconsole.log(data);//将json转成html并返回var dataArr = data.datavar innerHtml = ''for (let i = 0; i < dataArr.length; i++) {innerHtml += '<div class="item">' + dataArr[i] + '</div>'}return innerHtml;},state: { currPage: page } //第二次滑动的页码},function (data) {//scroll一次滑动完成执行console.log('currPage------',page)//之后的滑动更新当前页面$('#infinteId').infinitescroll('update', {state: { currPage: page} });});},complete: function (XMLHttpRequest, textStatus) {// $(".loading").hide();},error: function () {//请求出错处理 //showError("网络出错，请刷新页面"); }});});
</script></html>
前端代码《接口返回文本数据》
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无限滚动加载</title><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.in_scroll {width: 150px;/* height: 500px; */margin: 0 auto;/* overflow-y: auto; */border: 1px solid blue;padding: 0px 2px;box-sizing: border-box;}.item {width: 100%;height: 100px;font-size: 30px;line-height: 100px;text-align: center;border: 1px solid gray;margin-top: 2px;box-sizing: border-box;}#infscr-loading{text-align: center;}</style>
</head><body><!--tasks是最外层的元素，所有加载的内容都会放在这个元素内--><div class="in_scroll" id='infinteId'><!--这是显示的每个条目的内容，保证都有一个共同的class属性，不必是item--><!-- <div class="item">1</div> --></div><div id="page-nav" class="hidden"><!--在最后，要加上一个导航，每次滚到底部，就会触发这个url去加载数据--><a href="http://127.0.0.1:8888/api/getData?page=2"></a></div></body>
<script src="../js/jquery-1.8.3.js"></script>
<script src="../js/jquery.infinitescroll.dev.js"></script>
<script>$(function () {var url = "http://127.0.0.1:8888/api/getData?page=1";$.ajax({type: "get",url: url,cache: false,beforeSend: function (XMLHttpRequest) {// $(".loading").show();},success: function (data, textStatus) {$('#infinteId').append(data);var currPage = $('.currPage').val()$('.currPage').parent().remove()$('#infinteId').infinitescroll({navSelector: '#page-nav', // selector for the paged navigation nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)itemSelector: '.item', // selector for all items you'll retrievedebug: true,loading: {finishedMsg: '已经到底了！亲',img: '../img/ajaxs.gif',msgText: '努力加载中...'},state: { currPage: currPage } //第二次滑动的页码},function (data) {// $('#infinteId').append(data); var currPage = $('.currPage').val()$('.currPage').parent().remove()$('#infinteId').infinitescroll('update', {state: { currPage: currPage} });});},complete: function (XMLHttpRequest, textStatus) {// $(".loading").hide();},error: function () {//请求出错处理 //showError("网络出错，请刷新页面"); }});});
</script></html>
node后端接口
var express = require('express')
var app = express()
//测试接口
app.get('/api/getData', (req, res) => {let page = parseInt(req.query.page)res.setHeader("Access-control-Allow-Origin", '*');//这里很关键的一句，表示发送的消息是以纯文本形式发送的res.set('Content-Type', 'text/plain')let innerHtml = ''for (let i = page*10; i < (page+1)*10; i++) {innerHtml += '<div class="item">' + (i + 1) + '</div>'}innerHtml += '<div class="item"><input class="currPage" type="hidden" value="'+ (page+2) +'" /></div>'res.send(innerHtml)
})app.get('/api/getDataJ', (req, res) => {let page = parseInt(req.query.page)res.setHeader("Access-control-Allow-Origin", '*');let userArr = []for (let i = page*10; i < (page+1)*10; i++) {userArr.push(i)}res.send({status:0,currPage:(page+2),data:userArr})
})app.listen(8888, () => {console.log("8888端口");
});
相关文章：
jquery使用infinitescroll无线滚动+自定义翻页
jquery版本 jquery-1.8.3.js infinitescroll版本 2.0.0 如果infinitescroll版本最新的jquery版本也要用新的 接口用nodejs jquery.infinitescroll.js官网地址 前端代码《接口返回JSON数据》 <!DOCTYPE html> <html lang"en"> <head><meta cha…...
【漏洞复现】锐捷统一上网行为管理与审计系统——远程命令执行漏洞
声明：本文档或演示材料仅供教育和教学目的使用，任何个人或组织使用本文档中的信息进行非法活动，均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 锐捷统一上网行为管理与审计系统naborTable/static_convert.php…...
通义灵码上线 Visual Studio 插件市场啦！
通义灵码，是阿里云出品的一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力，提供代码智能生成、研发智能问答能力。 通义灵…...
：客观题真题集)
GESP 四级急救包(2)：客观题真题集
客观题真题集 一、选择题1. 真题梳理2. 真题答案3. 重难点点播(1) 指针和地址(2) 时间复杂度 二、判断题1. 真题梳理2. 真题答案 一、选择题 1. 真题梳理 若函数声明为 void f(int &a, int b, const int &c)，且在主函数内已经声明了 x , y , z x,y,z x,y,…...
VERYCLOUD睿鸿股份确认参展2024年ChinaJoy BTOB商务洽谈馆，期待与你相聚
作为在全球数字娱乐领域兼具知名度与影响力的年度盛会，2024年第二十一届ChinaJoy将于7月26日至7月29日在上海新国际博览中心盛大召开，本届展会主题为：初心“游”在，精彩无限！（Stay True, Game On.ÿ…...
Java面试题：讨论Spring框架的核心组件，如IoC容器、AOP、事务管理等
Spring框架是一个功能强大且灵活的Java企业级应用开发框架，其核心组件包括以下几个主要部分： 1. IoC容器（Inversion of Control Container） IoC容器是Spring框架的核心部分，用于管理应用程序的依赖注入（D…...
【方案】基于5G智慧工业园区解决方案（PPT原件）
5G智慧工业园区整体解决方案旨在通过集成5G通信技术、物联网、大数据和云计算等先进技术，实现园区的智能化、高效化和绿色化。 该方案首先构建高速、稳定的5G网络，确保园区内设备、人员与物流的实时连接和高效沟通。其次，通过工业物联网技术&…...
使用System.currentTimeMillis获取当前时间
使用System.currentTimeMillis获取当前时间 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们来探讨Java中如何使用System.currentTimeMillis()方法来获取…...
手机远程控制另一台手机的全新使用教程（安卓版）
看完这篇文章，你可以了解到安卓手机如何远程控制安卓手机，以及苹果手机如何远程控制安卓手机。 如果想要用安卓手机远程管控苹果手机，或者苹果手机远程管控另一台苹果手机，请点击查看视频《手机远程管控另一台手机的全新使用教程…...
商城积分系统的代码实现（上）-- 积分账户及收支记录
一、背景 上一系列文章，我们说了积分的数模设计及接口设计，接下里，我们将梳理一下具体的代码实现。 使用的语言的java，基本框架是spring-boot，持久化框架则是Jpa。 使用到的技术点有： 分布式锁…...
【C++进阶9】异常
一、C语言传统的处理错误的方式 终止程序，如assert 如发生内存错误，除0错误时就会终止程序返回错误码 需要程序员自己去查找对应的错误 z如系统的很多库的接口函数都是通 过把错误码放到errno中，表示错误 二、C异常概念 异常：函…...
RecyclerVIew-＞加速再减速的RecyclerVIew平滑对齐工具类SnapHelper
XML文件 ItemView的XML文件R.layout.shape_item_view <?xml version"1.0" encoding"utf-8"?> <FrameLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"100dp"android:layout_heig…...
突破SaaS产品运营困境：多渠道运营如何集中管理？
随着数字化时代的到来，SaaS（软件即服务）产品已成为企业日常运营不可或缺的工具。然而，在竞争激烈的市场环境下，SaaS产品运营越来越重视多渠道、多平台布局，以更广泛地触及潜在用户，然而…...
智能语音热水器：置入NRK3301离线语音识别ic 迈向智能家居新时代
一、热水器语音识别芯片开发背景 在科技的今天，人们对于生活品质的追求已不仅仅满足于基本的物质需求，更渴望通过智能技术让生活变得更加便捷、舒适。热水器作为家庭生活中不可或缺的一部分，其智能化转型势在必行。 在传统热水器使用中&#…...
Redis集群部署合集
目录 一. 原理简述 二. 集群配置 2.1 环境准备 2.2 编译安装一个redis 2.3 创建集群 2.4 写入数据测试 实验一： 实验二： 实验三： 实验四： 添加节点 自动分配槽位 提升节点为master： 实验…...
【HDFS】关于Hadoop的IPC.Client类的一些整理
org.apache.hadoop.ipc.Client 类是IPC服务的一个客户端。 IPC请求把一个Writable对象当做参数，返回一个Writable对象当做结果value。 一个IPC服务运行在某个端口上，并且由参数class和value class定义。 Router里的IPC.Client对象就两个 有这样一个类：ClientCache 看名字就…...
Swoole v6 能否让 PHP 再次伟大？
现状 传统的 PHP-FPM 也是多进程模型的的运行方式，但每个进程只能处理完当前请求，才能接收下一个请求。而且对于 PHP 脚本来说，只是接收请求和响应请求，并不参与网络通信。对数据库资源的操作，也是一次请求一次有效&am…...
C++ STL Iterator Adapter
1. std::back_insert_iterator 使用 // back_insert_iterator example #include <iostream> // std::cout #include <iterator> // std::back_insert_iterator #include <vector> // std::vector #include <algorithm> // std::copy…...
android-aidl5
aidl类是实现Manager和Service通信的桥梁。 例如在修改Android Wifi功能的时候看到WifiManager管理WifiService； AIDL是一种android内部进程通信接口的描述语言,通过它我们可以定义进程间的通信接口。 比如onclick（），用oneway修…...
day01-项目介绍及初始化-登录页
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 day01-项目介绍及初始化-登录页一、人力资源项目介绍1.1项目架构和解决方案主要模块解决的问题 二、拉取项目基础代码1.引入库2.升级core-js版本到3.25.5按照完整依…...
[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解
突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
【入坑系列】TiDB 强制索引在不同库下不生效问题
文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
linux 错误码总结
1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...