原生JS实现移动端下拉刷新与上拉加载原理及代码
本文详细解析使用原生JavaScript实现移动端下拉刷新和上拉加载更多的核心原理与代码实现。通过监听touchstart、touchmove和touchend事件处理下拉刷新，利用clientHeight、scrollTop与scrollHeight的关系判断触底以触发上拉加载，提供完整可运行的代码示例供开发者参考。
本文分享使用原生JavaScript实现移动端下拉刷新与上拉加载更多的具体代码示例，供开发者参考学习。
1. 下拉刷新实现
由于原生JavaScript开发已较少使用，此处先梳理涉及的关键前置知识点：
移动端触屏事件主要包括：touchstart（手指按下瞬间）、touchmove（手指在屏幕滑动过程）以及touchend（手指离开屏幕）。
获取手指在页面中的坐标位置，主要依赖pageX和pageY属性。
在编码前需明确其核心原理：下拉刷新的本质是当用户在页面顶部执行上拉动作并达到特定距离阈值时，触发数据刷新逻辑。
实现该功能主要需处理以下几个关键环节：
1. 在touchstart事件中，记录手指按下时的初始位置坐标。
2. 在touchmove事件中，计算手指当前坐标与初始位置的差值，从而得出下滑距离。让容器元素跟随手指下滑方向进行位移（通过translateY对应差值距离），同时设定允许下滑的最大距离限制，防止页面被过度下拉。
3. 在touchend事件中，判断下滑差值是否达到预设阈值。若达到，则执行数据刷新逻辑并触发回弹动画以显示加载状态（loading）。
理论说明完毕，直接展示代码实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
/* 容器原始位置向上移动60px,隐藏掉loading盒子,下拉时才显示出来 */
position: relative;
top: -100px;
}
.container .loading {
text-align: center;
height: 100px;
line-height: 100px;
}
.container .list {
border: 1px solid #666;
}
.container .list li {
line-height: 80px;
}
.container .list li:nth-child(2n) {
background-color: #ccc;
}
</style>
</head>
<body>
<section class="container">
<section class="loading">
<span>下拉刷新</span>
</section>
<section class="list">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</section>
</section>
</body>
<script type="text/javascript">
// 滚动容器
const container = document.querySelector('.container');
// loading文字容器
const span = container.querySelector('span');
let startPosition = 0;// 下拉的开始位置
let distance = 0;// 下拉距离的差值
// 手指按下时
container.addEventListener('touchstart', function (e) {
// 在回弹后的下一次下拉按下时重置loading文本
span.textContent = '下拉刷新';
// 记录开始位置
startPosition = e.touches[0].pageY;
})
// 手指移动时
container.addEventListener('touchmove', function (e) {
// 计算下拉差值
const currentPosition = e.touches[0].pageY;
// 计算下拉后离开始位置的差值
distance = currentPosition - startPosition;
// 如果下拉差值达到,则提示可以松手了 这个达到的具体值这里是取的下拉出来的区域高度
if (distance > 100) {// 案例以100为临界值,超过了100的距离就提示释放刷新
span.textContent = '释放刷新';
}
// 限制下滑的最大值为120,超过就不再下滑
if (distance < 120) {
// 容器的这个下滑是瞬时的 取消过渡效果
this.style.transition = 'transform 0s';
this.style.transform = `translateY(${distance}px)`
}
})
// 手指松开时
container.addEventListener('touchend', function (e) {
// 回弹的动作可以给个1s的过渡效果
this.style.transition = 'transform 1s';
// 如果下拉差值并没有达到 则直接回弹
if (distance > 0 && distance < 100) {
this.style.transform = `translateY(0px)`
return;
}
if (distance > 100) {
// 下拉差值达到了就显示刷新中,并暂时定格在这个位置
this.style.transform = `translateY(100px)`;
span.textContent = '刷新中';
// 等数据回来后显示刷新成功1s然后再回弹 到这里本次整个下拉执行完毕
setTimeout(() => {// setTimeout模拟异步请求 真实开发这里是一个promise请求
span.textContent = '刷新成功';
// 这个setTimeout让刷新成功显示一秒后再回弹
setTimeout(() => {
this.style.transform = `translateY(0px)`
}, 1000)
}, 2000);
}
// 一次下拉结束后重置差值
distance = 0;
})
</script>
</html>运行效果如图所示：
2. 上拉加载实现
上拉加载涉及的核心JavaScript DOM属性包括以下三个： * clientHeight：指不包含边框的元素可视区域高度。
* scrollTop：指元素滚动时已卷上去的距离。
* scrollHeight：指元素的实际总高度，包含已卷上去的部分。
基于上述三个属性，可以得出判断是否触底的计算公式：
clientHeight + scrollTop <= scrollHeight - 触底指定距离
上拉加载的基本原理如下：
通过监听元素的scroll滚动事件，判断元素滚动位置是否距离底部达到指定阈值，若满足条件则触发数据加载逻辑。
明确原理及三者关系后，只需判断上述公式即可确定滚动条是否进入触底范围。以下是具体代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
height: 100vh;
overflow-y: scroll;
}
.container .list {
border: 1px solid #666;
}
.container .list li {
line-height: 80px;
}
.container .list li:nth-child(2n) {
background-color: #ccc;
}
</style>
</head>
<body>
<section class="container">
<section class="list">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</section>
</section>
</body>
<script type="text/javascript" defer="defer">
// 滚动容器
const container = document.querySelector('.container');
// 监听滚动事件
container.addEventListener('scroll', _.debounce(function (e) {
// 当元素的可视高度+滚入的距离>=元素真实高度-触底距离时,触发加载更多
if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {
setTimeout(() => {
// 这里是一个异步加载数据的操作
console.log('加载更多')
}, 1000);
}
}, 700))
</script>
</html>效果展示如图：
以上为本文的全部内容，希望能为各位的学习提供有益帮助，也欢迎大家继续支持本站。
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09