web端下拉加载（分页）

最新推荐文章于 2024-07-12 08:49:54 发布

wuxiYmy

最新推荐文章于 2024-07-12 08:49:54 发布

阅读量3.4k

点赞数

分类专栏： web前端文章标签： web前端交互 js 下拉加载

本文链接：https://blog.csdn.net/wuxiYmy/article/details/86645231

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

<style>

.loading {

position: fixed;

top: 40%;

left: 50%;

width: 30px;

height: 30px;

margin-left: -15px;

margin-top: -15px;

border-radius: 50%;

border: 4px solid rgba(0, 0, 0, 0.1);

border-left-color: red;

margin: 0 auto;

animation: load-circle 1.2s linear infinite;

}

@keyframes load-circle {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

#container {

position: relative;

}

</style>

</head>

<body>

下拉加载<br />

下拉加载<br /> 下拉加载<br /> 下拉加载<br /> 下拉加载<br /> 下拉加载<br />

</div>

var data = `

下拉加载11<br/>

下拉加载11<br/> 下拉加载<br/> 下拉加载<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/>

下拉加载11<br/> 下拉加载11<br/> 下拉加载<br/> 下拉加载11<br/> 下拉加载<br/>

下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载<br/> 下拉加载11<br/>

下拉加载11<br/> 下拉加载<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/>

下拉加载11<br/> 下拉加载11<br/> 下拉加载<br/> 下拉加载<br/> 下拉加载11<br/>

下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/> 下拉加载11<br/>

下拉加载11<br/> 下拉加载<br/> 下拉加载<br/> 下拉加载11<br/> 下拉加载11<br/>

var loadDiv = '<div class="loading"></div>';

//获取滚动条当前的位置

function getScrollTop() {

var scrollTop = 0;

if (document.documentElement && document.documentElement.scrollTop) {

scrollTop = document.documentElement.scrollTop;

} else if (document.body) {

scrollTop = document.body.scrollTop;

}

return scrollTop;

}

//获取当前可视范围的高度

function getClientHeight() {

var clientHeight = 0;

if (document.body.clientHeight && document.documentElement.clientHeight) {

clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);

} else {

clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);

}

return clientHeight;

}

//获取文档完整的高度

function getScrollHeight() {

return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

}

//滚动事件触发

window.onscroll = function () {

console.log(getScrollTop());

console.log(getClientHeight());

console.log(getScrollHeight());

if (parseFloat(getScrollTop()) + parseFloat(getClientHeight()) + 50 > parseFloat(getScrollHeight())) {

console.log('下拉刷新了')

if (document.getElementsByClassName('loading').length == 0) {

//loading样式

$('#container').append(loadDiv);

}

//实际为ajax请求数据

setTimeout(function () {

console.log('加载新内容')

//移除loading

$('.loading').remove();

//追加后端返回的数据

$('#container').append(data);

}, 1000);

}

</script>

</body>

</html>

wuxiYmy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web端下拉加载（分页）

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;下拉加载&lt;/title&gt;&lt;script src="./jquery.min.1.8.1.js"&gt;&lt;/script&gt;
复制链接

扫一扫

专栏目录