<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item, index) in list" :key="index">
<div>{{item}}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
pageNum: 1,
pageSize: 1,
list: [],
flag: true
},
mounted() {
this.pagination()
$(window).scroll(()=>{
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
this.pagination()
}
});
},
methods: {
pagination() {
let that = this
if (that.flag = true) {
axios.get("api?pageSize=" + that.pageSize + "&" + "pageNum=" + that.pageNum).then(res => {
console.log(res.data.data.length)
for (let i = 0; i < res.data.data.length; i++) {
that.list.push(res.data.data[i])
}
if (that.list.length < res.data.data.length) {
that.pageNum++
} else {
that.flag = false;
}
}).catch(err => {
console.log(err)
}).then()
}
}
}
})
</script>
</body>
</html>
