刚好要写这个， 分享一下代码。 移动和PC都可以用， 但是APP用的比较多。
用的是Vue2.0，mint-ui 是一个基于Vue的UI组件库
主要是3个API, 放到你的元素中即可实现
// loadMore是一个方法， 当滚动到底部的时候会触发
v-infinite-scroll="loadMore"
// loading 是一个属性布尔值， true 表示不会粗发滚动方法否则...
infinite-scroll-disabled="loading"
// 距离， 看你的需求了。
infinite-scroll-distance="10"
// 用法示例， li 是v-for 出来的数据
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="(item, index) of items" :key="index">{{ item }}</li>
</ul>
前端代码ES5, 完全可以Copy到你的项目中，已经做好处理。
HTTP请求用的是axios 建议大家用，你会爱上他的。axios教程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无限加载应用</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
li {
text-align: center;
padding: 40px 0;
font-size: 20px;
}
h1 {
text-align: center;
color: #f50;
}
</style>
</head>
<body>
<div id="app">
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<li v-for="(item, index) of items" :key="index">{{ item }}</li>
</ul>
<h1 v-show="loading" ref="loading">数据获取中...</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: ['一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求', '一开始显示20条数据, 实际看你需求'], // 这是列表数据，展示用
page: 0, // 页数
loading: false, // 如果是true 无限滚动失效
},
methods: {
// 快到底部的时候回触发这个事件
loadMore: function () {
var _this = this;
this.loading = true; // 将无限滚动禁止，loading 会显示
axios.get('http://localhost:3001/api/test', {
params: {
page: this.page++, // 发送页数给后端
}
})
.then(function (res) {
_this.loading = false;
if( res.data.status == 200 ) {
res.data.items.forEach(function (el, index) {
_this.items.push(el);
console.log(el);
})
return;
}
// 没有数据了。不能继续加载了, 后面不会再粗发这个方法
_this.loading = true;
_this.$refs.loading.textContent = '已经没有数据了';
})
.catch(function (e) {
_this.loading = false;
console.log('发生错误');
})
}
}
})
</script>
</body>
</html>
后端是Node.js 代码
var express = require('express')
var app = express();
app.use((req, res, next) => {
// 设置跨域头
res.set({
'Access-Control-Allow-Origin': '*'
})
next();
})
// 模拟的数据， 每次10条
var arr = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
[4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
[5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
[6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
[7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
[8, 8, 8, 8, 8, 8, 8, 8, 8, 8],
[9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
[10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
[11, 11, 11, 11, 11, 11, 11, 11, 11, 11],
[12, 12, 12, 12, 12, 12, 12, 12, 12, 12],
[13, 13, 13, 13, 13, 13, 13, 13, 13, 13],
[14, 14, 14, 14, 14, 14, 14, 14, 14, 14],
[15, 15, 15, 15, 15, 15, 15, 15, 15, 15],
[16, 16, 16, 16, 16, 16, 16, 16, 16, 16],
[17, 17, 17, 17, 17, 17, 17, 17, 17, 17],
[18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
[19, 19, 19, 19, 19, 19, 19, 19, 19, 19],
[20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
];
app.get('/api/test', (req, res) => {
var page = parseInt(req.query.page);
if( page >= 20 ) {
res.json({
status: 0,
msg: '已经没有数据了',
page,
items: []
})
return;
}
// 模拟从数据库读取要500毫秒时间
setTimeout(() => {
res.json({
status: 200,
msg: '获取数据成功',
page,
items: arr[page]
})
}, 500);
})
app.listen(3001)
启动Node.js
npm init
npm install express --save
node app.js
