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.data
var 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 retrieve
debug: true,
loading: {
finishedMsg: '已经到底了！亲',
img: '../img/ajaxs.gif',
msgText: '努力加载中...'
},
dataType: 'json',//可以是json
template: function(data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
page = data.currPage
console.log(data);//将json转成html并返回
var dataArr = data.data
var 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 retrieve
debug: 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端口");
});
