html
<div id="save">
<div class="scroll">
<br><br><br><br><br><br><br>
sdhfiahdifashdifhid
<span id="js_con"></span>
</div>
</div>
script
mounted() {
(也可以是特定的div)window.addEventListener('scroll', function() {
var saveHeight = $('#save').height();//当前窗口的高度
var scrollTop = $('#save').scrollTop();//当前滚动条从上往下滚动的距离
var docHeight = $('.scroll').height(); //当前文档的高度
//当 滚动条距底部的距离 + 滚动条滚动的距离 >= 文档的高度 - 窗口的高度
//换句话说:(滚动条滚动的距离 + 窗口的高度 = 文档的高度) 这个是基本的公式
console.log(scrollTop,saveHeight,docHeight)
if ((scrollTop + saveHeight)+100 >= docHeight) {
console.log("===加载更多数据===");
$('.scroll').height($('.scroll').height() + 400);//加载数据代码
}
});
}
methods: {
getInitialUsers() {
for (var i = 0; i < 5; i++) {
this.$ajax.get(`https://randomuser.me/api/`).then(response => {
console.log(response);
this.persons.push(response.data.results[0]);
});
}
},
}