当前位置： 首页 > news >正文

jquery使用infinitescroll无线滚动+自定义翻页

news 2025/10/28 11:07:32

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…...

编程日记 2024/6/28 19:16:18

【漏洞复现】锐捷统一上网行为管理与审计系统——远程命令执行漏洞

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现测试工具 漏洞描述 锐捷统一上网行为管理与审计系统naborTable/static_convert.php…...

编程日记 2024/6/28 19:15:15

通义灵码上线 Visual Studio 插件市场啦！

通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力&#xff0c;提供代码智能生成、研发智能问答能力。 通义灵…...

编程日记 2024/6/28 19:14:12

GESP 四级急救包(2)：客观题真题集

客观题真题集 一、选择题1. 真题梳理2. 真题答案3. 重难点点播(1) 指针和地址(2) 时间复杂度 二、判断题1. 真题梳理2. 真题答案 一、选择题 1. 真题梳理 若函数声明为 void f(int &a, int b, const int &c)&#xff0c;且在主函数内已经声明了 x , y , z x,y,z x,y,…...

编程日记 2024/6/28 19:12:09

VERYCLOUD睿鸿股份确认参展2024年ChinaJoy BTOB商务洽谈馆，期待与你相聚

作为在全球数字娱乐领域兼具知名度与影响力的年度盛会&#xff0c;2024年第二十一届ChinaJoy将于7月26日至7月29日在上海新国际博览中心盛大召开&#xff0c;本届展会主题为&#xff1a;初心“游”在&#xff0c;精彩无限&#xff01;&#xff08;Stay True, Game On.&#xff…...

编程日记 2024/6/28 19:11:07

Java面试题：讨论Spring框架的核心组件，如IoC容器、AOP、事务管理等

Spring框架是一个功能强大且灵活的Java企业级应用开发框架&#xff0c;其核心组件包括以下几个主要部分&#xff1a; 1. IoC容器&#xff08;Inversion of Control Container&#xff09; IoC容器是Spring框架的核心部分&#xff0c;用于管理应用程序的依赖注入&#xff08;D…...

编程日记 2024/6/28 19:10:05

【方案】基于5G智慧工业园区解决方案（PPT原件）

5G智慧工业园区整体解决方案旨在通过集成5G通信技术、物联网、大数据和云计算等先进技术&#xff0c;实现园区的智能化、高效化和绿色化。 该方案首先构建高速、稳定的5G网络&#xff0c;确保园区内设备、人员与物流的实时连接和高效沟通。其次&#xff0c;通过工业物联网技术&…...

编程日记 2024/6/28 19:07:59

使用System.currentTimeMillis获取当前时间

使用System.currentTimeMillis获取当前时间 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨Java中如何使用System.currentTimeMillis()方法来获取…...

编程日记 2024/6/28 19:05:56

手机远程控制另一台手机的全新使用教程（安卓版）

看完这篇文章&#xff0c;你可以了解到安卓手机如何远程控制安卓手机&#xff0c;以及苹果手机如何远程控制安卓手机。 如果想要用安卓手机远程管控苹果手机&#xff0c;或者苹果手机远程管控另一台苹果手机&#xff0c;请点击查看视频《手机远程管控另一台手机的全新使用教程…...

编程日记 2024/6/28 19:04:54

商城积分系统的代码实现（上）-- 积分账户及收支记录

一、背景 上一系列文章&#xff0c;我们说了积分的数模设计及接口设计&#xff0c;接下里&#xff0c;我们将梳理一下具体的代码实现。 使用的语言的java&#xff0c;基本框架是spring-boot&#xff0c;持久化框架则是Jpa。 使用到的技术点有&#xff1a; 分布式锁&#xf…...

编程日记 2024/6/28 19:01:48

【C++进阶9】异常

一、C语言传统的处理错误的方式 终止程序&#xff0c;如assert 如发生内存错误&#xff0c;除0错误时就会终止程序返回错误码 需要程序员自己去查找对应的错误 z如系统的很多库的接口函数都是通 过把错误码放到errno中&#xff0c;表示错误 二、C异常概念 异常&#xff1a;函…...

编程日记 2024/6/28 19:00:46

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…...

编程日记 2024/6/28 18:58:43

突破SaaS产品运营困境：多渠道运营如何集中管理？

随着数字化时代的到来&#xff0c;SaaS&#xff08;软件即服务&#xff09;产品已成为企业日常运营不可或缺的工具。然而&#xff0c;在竞争激烈的市场环境下&#xff0c;SaaS产品运营越来越重视多渠道、多平台布局&#xff0c;以更广泛地触及潜在用户&#xff0c;然而&#xf…...

编程日记 2024/6/28 18:57:41

智能语音热水器：置入NRK3301离线语音识别ic 迈向智能家居新时代

一、热水器语音识别芯片开发背景 在科技的今天&#xff0c;人们对于生活品质的追求已不仅仅满足于基本的物质需求&#xff0c;更渴望通过智能技术让生活变得更加便捷、舒适。热水器作为家庭生活中不可或缺的一部分&#xff0c;其智能化转型势在必行。 在传统热水器使用中&#…...

编程日记 2024/6/28 18:56:39

Redis集群部署合集

目录 一. 原理简述 二. 集群配置​​​​​​​ 2.1 环境准备 2.2 编译安装一个redis 2.3 创建集群 2.4 写入数据测试 实验一&#xff1a; 实验二&#xff1a; 实验三&#xff1a; 实验四&#xff1a; 添加节点 自动分配槽位 提升节点为master&#xff1a; 实验…...

编程日记 2024/6/28 18:55:37

【HDFS】关于Hadoop的IPC.Client类的一些整理

org.apache.hadoop.ipc.Client 类是IPC服务的一个客户端。 IPC请求把一个Writable对象当做参数，返回一个Writable对象当做结果value。 一个IPC服务运行在某个端口上，并且由参数class和value class定义。 Router里的IPC.Client对象就两个 有这样一个类：ClientCache 看名字就…...

编程日记 2024/6/28 18:53:34

Swoole v6 能否让 PHP 再次伟大？

现状 传统的 PHP-FPM 也是多进程模型的的运行方式&#xff0c;但每个进程只能处理完当前请求&#xff0c;才能接收下一个请求。而且对于 PHP 脚本来说&#xff0c;只是接收请求和响应请求&#xff0c;并不参与网络通信。对数据库资源的操作&#xff0c;也是一次请求一次有效&am…...

编程日记 2024/6/28 18:49:29

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…...

编程日记 2024/6/28 18:48:28

android-aidl5

aidl类是实现Manager和Service通信的桥梁。 例如在修改Android Wifi功能的时候看到WifiManager管理WifiService&#xff1b; AIDL是一种android内部进程通信接口的描述语言,通过它我们可以定义进程间的通信接口。 比如onclick&#xff08;&#xff09;&#xff0c;用oneway修…...

编程日记 2024/6/28 18:47:27

day01-项目介绍及初始化-登录页

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 day01-项目介绍及初始化-登录页一、人力资源项目介绍1.1项目架构和解决方案主要模块解决的问题 二、拉取项目基础代码1.引入库2.升级core-js版本到3.25.5按照完整依…...

编程日记 2024/6/28 18:46:24

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/10/27 12:51:42

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/10/21 11:44:51

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/10/27 7:26:51

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2025/9/11 13:56:27

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/10/25 19:34:13

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2025/10/26 15:45:04

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/9/13 20:07:18

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/9/18 10:36:44