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

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

news 2026/2/9 9:56:44

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