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端口");
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/36274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【逻辑回归实现多分类】

逻辑回归实现多分类原理 一、逻辑回归是什么&#xff1f;1. Sigmoid函数 二、如何扩展到多分类1. 一对多&#xff08;OvR&#xff09;实现细节 2. 一对一&#xff08;OvO&#xff09;3. 多对多&#xff08;MvM&#xff09;实现细节 三、sklearn库实现1. 引入库2. 加载并准备数据…

ONLYOFFICE 8.1 版本桌面编辑器测评

在现代办公环境中&#xff0c;办公软件的重要性不言而喻。从文档处理到电子表格分析&#xff0c;再到演示文稿制作&#xff0c;强大且高效的办公软件工具能够极大提升工作效率。ONLYOFFICE 作为一个功能全面且开源的办公软件套件&#xff0c;一直以来都受到广大用户的关注与喜爱…

OpenAI推出自我改进AI- CriticGPT

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

rust 如何debug

rust如何debug 如果创建的是一个二进制文件&#xff0c;并不是一个可执行文件 比如使用napi-rs/cli 创建出来的一个xxxx.node文件 我们想在vscode 中调试 1.1 创建launch.json {"version": "0.2.0","configurations": [{"type": &qu…

Android C++系列:认识JNI

1. 什么是JNI JNI是Java Native Interface的缩写,通过使用 Java本地接口书写程序,可以确保代码在不同的平台上方便移植。 JNI不仅仅是Android特有的,它是属于Java平台的,它允许在Java虚拟机内运行的java代码与其他编程语言(如c, c++和汇编语言)编写的程序和库进行交互。…

如何进行黄金期货日内波段交易-EE trade

日内波段交易是一种在单个交易日内抓取较大波段趋势的方法&#xff0c;旨在利用市场的短期波动获取利润。黄金期货市场由于其高波动性和高杠杆性&#xff0c;成为日内波段交易的理想选择。以下是黄金期货日内波段交易的详细策略和方法。 一、日内波段交易整体设计思想 1. 顺应…

【鸿蒙学习笔记】逻辑控制语句

官方文档&#xff1a;ArkTS语言介绍 目录标题 逻辑If语句Switch语句条件表达式 循环For语句For-of语句While语句Do-while语句Break语句Continue语句 异常Throw和Try语句 逻辑 If语句 if (condition1) {// 语句1 } else if (condition2) {// 语句2 } else {// else语句 }Switc…

【Linux】生物信息学常用基本命令

wget网址用于直接从网上下载某个文件到服务器&#xff0c;当然也可以直接从网上先把东西下到本地然后用filezilla这个软件来传输到服务器上。 当遇到不会的命令时候&#xff0c;可以使用man “不会的命令”来查看这个命令的详细信息。比如我想要看看ls这个命令的详细用法&…

独立开发者系列(12)——下单与支付

做业务有个绕不开的业务逻辑&#xff0c;就是支付。这里总结一个基础的支付电商逻辑闭环流程&#xff0c;完成支付基础体系的实现。这里假定我们要实现的是一个独立的电商平台上允许用户在平台充值&#xff0c;其他的类似多多购物或者淘宝购物的流程逻辑。 数据表结构的逻辑设…

使用uniapp编写微信小程序

使用uniapp编写微信小程序 文章目录 使用uniapp编写微信小程序前言一、项目搭建1.1 创建项目方式1.1.1 HBuilderX工具创建1.1.2 命令行下载1.1.3 直接Gitee下载 1.2 项目文件解构1.2.1 安装依赖1.2.2 项目启动1.2.3 文件结构释义 1.2 引入uni-ui介绍 二、拓展2.1 uni-app使用uc…

简单的身份切换和执行工具su-exec —— 筑梦之路

简介 su-exec是一个理想的用于身份切换和权限控制的工具&#xff0c;尤其适合对性能和空间有要求的环境。无论是开发人员还是系统管理员&#xff0c;都值得将它纳入工具箱&#xff0c;以提高工作效率和系统的安全性 官方网站&#xff1a;GitHub - ncopa/su-exec: switch user …

【高考】人生规划指南

作为一个正处在这个选择的十字路口的高考考生&#xff0c;我认为在选择专业和学校时&#xff0c;要根据自己的具体情况和个人目标来权衡。首先&#xff0c;我认为专业是首要考虑因素。因为专业是直接决定未来职业发展方向的&#xff0c;如果不喜欢或者不适合的专业选择&#xf…

数字时代的文化革命:Facebook的社会影响

随着数字技术的飞速发展和互联网的普及&#xff0c;社交网络如今已成为人们日常生活中不可或缺的一部分。在众多社交平台中&#xff0c;Facebook作为最大的社交网络之一&#xff0c;不仅连接了全球数十亿用户&#xff0c;更深刻影响了人们的社会互动方式、文化认同和信息传播模…

前端面试题(基础篇十二)

一、link标签定义、与import的区别 link 标签定义文档与外部资源的关系。 link 元素是空元素&#xff0c;它仅包含属性。 此元素只能存在于 head 部分&#xff0c;不过它可出现任意数。 link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是…

双系统的笔记本电脑,系统引导不见了怎么办

双系统的笔记本电脑&#xff0c;系统引导不见了怎么办 个人情况 联想拯救者R9000P 按照了windows11&#xff08;电脑自带的系统&#xff09;&#xff0c;后面自己按照了ubuntu22.04 只是windows11自动更新导致系统的引导项不见的 解决办法 在电脑开机的时候&#xff0c;不停…

Python酷库之旅-第三方库openpyxl(15)

目录 一、 openpyxl库的由来 1、背景 2、起源 3、发展 4、特点 4-1、支持.xlsx格式 4-2、读写Excel文件 4-3、操作单元格 4-4、创建和修改工作表 4-5、样式设置 4-6、图表和公式 4-7、支持数字和日期格式 二、openpyxl库的优缺点 1、优点 1-1、支持现代Excel格式…

回溯法c++学习 解决八皇后问题

使用回溯法解决八皇后问题 八皇后问题是一个以国际象棋为背景的问题&#xff1a;如何能够在88 的国际象棋棋盘上放置八个皇后&#xff0c;使得任何一个皇后都无法直接吃掉其他的皇后&#xff1f;为了达到此目的&#xff0c;任两个皇后都不能处于同一条横行、纵行或斜线上。这…

AUTOSAR汽车电子嵌入式编程精讲300篇-智能网联汽车CAN总线-发展现状

目录 前言 智能网联汽车的发展现状 国内外研究现状 智能网联汽车系统概述 智能网联汽车安全现状 智能网联汽车威胁分析 本文篇幅较长,分为多篇,文章索引详见 智能网联汽车CAN总线-发展现状 智能网联汽车CAN总线-智能网联汽车车内网络 智能网联汽车CAN总线-基于CAN…

pdf已加密如何解除?解密密码的两个方法【可加密】

电脑文件加密的目的就是保护重要信息&#xff0c;防止数据泄露。如果需要解除密码&#xff0c;应该如何操作呢&#xff1f;pdf已加密如何解除&#xff1f;本文整理了以下两种解除文件方法&#xff0c;希望能够帮到有需要的朋友们&#xff01; 方法一、使用金舟文件夹加密大师解…

vue3+vite+nodejs,通过接口的形式请求后端打包(可打包全部或指定打包组件)

项目地址https://gitee.com/sybb011016/test_build 打包通过按钮的形式请求接口&#xff0c;让后端进行打包&#xff0c;后端使用express-generator搭建模版。前端项目就在npm init vuelatest基础上添加了路由 如果只想打包AboutView组件&#xff0c;首先修改后端接口。 //打…