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

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

news 文章来源：https://blog.csdn.net/sinat_23336093/article/details/140047515 2025/1/13 15:39:29

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

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

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

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

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

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

编程日记 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)，且在主函数内已经声明了 x , y , z x,y,z x,y,…...

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

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

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

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

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

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

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

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

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

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

使用System.currentTimeMillis获取当前时间

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

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

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

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

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

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

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

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

【C++进阶9】异常

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

编程日记 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产品运营困境：多渠道运营如何集中管理？

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

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

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

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

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

Redis集群部署合集

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

编程日记 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 也是多进程模型的的运行方式，但每个进程只能处理完当前请求，才能接收下一个请求。而且对于 PHP 脚本来说，只是接收请求和响应请求，并不参与网络通信。对数据库资源的操作，也是一次请求一次有效&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； AIDL是一种android内部进程通信接口的描述语言,通过它我们可以定义进程间的通信接口。比如onclick（），用oneway修…...

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

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

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

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

华为开发者大会：全场景智能操作系统HarmonyOS NEXT

文章目录一、全场景智能操作系统 - HarmonyOS NEXT1.1 系统特性1.2 关于架构、体验和生态二、应用案例2.1 蚂蚁mpaas平台的性能表现三、新版本应用框架发布3.1 新语言发布3.2 新数据库发布3.3 新版本编译器的发布四、CodeArts和DataArts4.1 CodeArts4.2 DataArts 五、总结 …...

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

深度学习二分类评估详细解析与代码实战

深度学习二分类的实战代码：使用 Trainer API 微调模型. https://huggingface.co/learn/nlp-course/zh-CN/chapter3/3 如果你刚接触自然语言处理，huggingface 是你绕不过去的坎。但是目前它已经被墙了，相信读者的实力，自行解决吧。…...

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

c++笔记容器详细介绍

C标准库提供了多种容器来存储和管理数据。这些容器属于<vector>, <list>, <deque>, <map>, <set>, <unordered_map>, <unordered_set>等头文件中。这些容器各有优缺点，适用于不同的场景。下面详细介绍几种主要的容器及其…...

编程日记 2024/6/28 18:40:17

CS144 Lab3 TCPSender复盘

一.基础概念 1.TCPSender在TCPSocket中的地位与作用 Lab0中实现了基于内存模拟的流控制-字节流（ByteStream），底层使用std::deque实现，根据最大容量Capacity进行容量控制。个人理解它相当于应用层的输入输出缓存区，用户…...

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

建筑可视化中使用云渲染的几大理由

在建筑行业中，可视化技术已成为不可或缺的一部分。无论是设计方案的展示、施工进度的模拟，还是最终效果的呈现，建筑可视化都发挥着至关重要的作用。建筑可视化是指通过计算机技术和图形学算法，将建筑设计、规划和施工过程中的数据…...

编程日记 2024/6/28 18:38:13

Python数据可视化-地图可视化

1.首先绘制实现数据可视化的思维导图具体要实现什么功能-怎么处理，先把思路写好数据来源： 爬取的数据运行结果： 部分代码： 完整代码请在下方↓↓↓👇获取转载请注明出处！...

编程日记 2024/6/28 18:36:10

leetcode 动态规划（基础版）单词拆分

题目： 题解： 一种可行的dp做法是基于完全背包问题，将s看成是一个背包，wordDict看作是物品，然后往s中放入物品判断最终是否可以变为给定的s即可。这道题和上一题都用到了在dp如何枚举连续子串和状态表示：枚…...

编程日记 2024/6/28 18:35:09

Ubuntu/Linux调试安装南京来可CAN卡

准备好USB rules文件和can driver文件备用! 必做：放置USB rules文件到对应位置处理权限问题而后：安装内核driver并编译。需求众多依赖编译环境，视情况安装填补。如GCC,G,make等等进入对应64bit文件夹中，添加权限，执…...

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

vue2+TS获取到数据后自动叫号写法

1.父组件写法初始化： //引入子组件 <odialog ref"odialogRef" onSure"onSurea"></odialog> //子传父private onSurea() {// 初始化信息/重新叫号来的数据this.initTabelData()setTimeout(() > {// 播放声音的数据this.search…...

编程日记 2024/6/28 18:33:02

28、架构-边界：微服务的粒度

微服务的粒度在设计微服务架构时，确定微服务的粒度是一个关键问题。粒度过大或过小都会带来不同的问题，因此需要找到合理的粒度来划分微服务。下面详细探讨微服务粒度的合理范围及其影响因素。 1. 微服务粒度的上下界微服务的粒度不应该只有唯一正确…...

编程日记 2024/6/28 18:32:00

电商网站如何做优化/html网页完整代码作业

/*Ubuntu 14.04平台下 * 利用多线程 mmap文件内存共享 * 实现文件拷贝 *//*more thread copy files * 默认情况下开启5个线程 */ #include <stdio.h> #include <sys/stat.h> #include <sys/mman.h> #include <stdlib.h> #include <fcntl.h> #in…...

编程日记 2025/1/13 13:23:41

做投票链接的网站/网络服务网络推广

AQS 系列： 【JUC源码】JUC核心：AQS（一）底层结构分析【JUC源码】JUC核心：AQS（二）同步队列源码分析（独占锁）【JUC源码】JUC核心：AQS（三）…...

编程日记 2025/1/13 13:00:00

网站建设高端培训/近三天发生的重要新闻

文章目录第一章计算机系统结构基本概念1.1 计算机系统结构的概念1.2 计算机体系结构的发展1.3 系统结构中并行性的发展1.4 系统结构的设计1.5 定量分析技术基础第一章计算机系统结构基本概念课程内容 A I P S N 工业革命 1.1 计算机系统结构的概念引言第一台通用计算机 …...

编程日记 2025/1/13 12:25:39

国外的网站服务商/推广网

并发编程-Java线程池一、简述线程频繁的创建和销毁造成资源的浪费，如果是在并发情况下，这种频繁的操作会对性能影响非常大。为了避免线程的频繁创建与销毁，可以创建一定数量的线程集合，在需要使用时，从集合里获取…...

编程日记 2025/1/13 12:21:38

网站健设推广产品多少钱/山东百搜科技有限公司

0、首先得理解MP3格式文件的结构简单的就是 MP3 文件大体分为三部分：TAG_V2(ID3V2)，音频数据，TAG_V1(ID3V1) 参考此博客：点击打开链接 ID3V1的结构是： 表1：ID3V1结构 ------------------------------…...

编程日记 2025/1/13 11:30:54

旅游网站建设规划方案/sem是指什么

传送门首先应该考虑一下，多加一条边对树上路径的影响是什么可以发现多加一条边就会出现一颗基环树我们发现所有经过环的路径都会翻倍那么假设\(x\)是\(y\)的父亲，\(x\)在环内，那么将\(y\)加入环的贡献就是\((size[x]-size[y])*size[y]\) …...

编程日记 2025/1/13 11:08:38

相关文章：