<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表触底加载</title>
<style>
#main{width:600px;margin:20px auto;line-height:30px;}
#main img{margin: 10px 0;}
</style>
</head>
<body>
<div id="main">
<div class="list">
<div style="border: 1px solid #eee; padding:20px;" v-for="(item,index) in data" :key="index">
<div>{{item.title}}</div>
<img :src="item.img" alt="图片" width="200" height="100" />
<div>{{item.body}}</div>
</div>
</div>
<div style="text-align:center;">loading</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
window.onload = function(){
new Vue({
el: '#main',
data: {
name: '测试',
data: [], // 列表数据
page: 0, // 页数
rows: 5, // 每页行数
url: 'http://192.168.101:3000/list/page', // 请求列表的接口
endScreen: false // 是否到屏幕底部,如果到屏幕底部则变为true
},
created(){
this.getData();
// 监听页面的滚动事件
window.onscroll = ()=>{
this.endScreen = this.screenCheck();
}
},
watch: {
// 监听屏幕是否到达底部,如果是,则增加页数,加载数据
endScreen(newValue,oldValue){
if(newValue){
this.page++;
setTimeout(()=>{
this.getData(this.page, this.rows);
},1000)
}
}
},
methods: {
// 请求数据的方法
getData(page = this.page, rows = this.rows){
//fetch是新一代XMLHttpRequest的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。
fetch(this.url+'?page='+page+'&rows='+rows,{ method:'GET' }).then(res=>{
console.log(res);
return res.json(); //返回promise对象
}).then(res=>{ // 真实数据
console.log(res);
for(let i in res.data){
if(res.data[i].img){
var reg = '127.0.0.1';
res.data[i].img = res.data[i].img.replace(/127.0.0.1/g,'192.168.101'); // 注意跨域请求
}
this.data.push(res.data[i]);
}
})
},
// 检测屏幕是否到达底部的方法
screenCheck(){
let screenH = Math.ceil(window.innerHeight+window.scrollY); // 屏幕高度+滚动高度
let eleH = document.documentElement.offsetHeight; // 网页正文全文高
return screenH === eleH;
}
}
})
}
</script>
</body>
</html>