原⽣js实现下拉刷新和上拉加载更多
本⽂实例为⼤家分享了js实现下拉刷新和上拉加载更多的具体代码，供⼤家参考，具体内容如下
1.下拉刷新
由于原⽣js太久不⽤了，这⾥列⼀下此处涉及到的前置知识点:
移动端触屏事件: touchstart(⼿指按下的⼀瞬间),touchmove(⼿指在屏幕上移动时),touchend(⼿指松开时)
⼿指在页⾯上的坐标: pageX,pageY
原生js和js的区别写之前⾸先要懂原理，下拉刷新的本质就是⽤户在页⾯顶部进⾏上拉动作时拉到⼀定的距离触发数据刷新.
⼤概需要做的⼏个点:
1.在⼿指按下时(touchstart)记录⼿指的按下位置
2.在⼿指下滑时(touchmove)计算⼿指的坐标离⼿指按下时初始位置的差值得出下滑的距离，让容器顺应⼿指下滑的⽅向移动(translateY)对应差值的距离，对应的给⼀个允许⽤户下滑的最⼤距离，避免页⾯下
拉过长.
3.在⼿指松开时(touchend)判断下滑的差值是否达到预期的值来进⾏对应的刷新数据和回弹loading.
less word,show me
<!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⽂本
// 记录开始位置
startPosition = e.touches[0].pageY;
})
// ⼿指移动时
container.addEventListener('touchmove', function (e) {
// 计算下拉差值
const currentPosition = e.touches[0].pageY;
// 计算下拉后离开始位置的差值
distance = currentPosition - startPosition;
// 如果下拉差值达到，则提⽰可以松⼿了这个达到的具体值这⾥是取的下拉出来的区域⾼度 if (distance > 100) {// 案例以100为临界值，超过了100的距离就提⽰释放刷新
}
// 限制下滑的最⼤值为120，超过就不再下滑
if (distance < 120) {
// 容器的这个下滑是瞬时的取消过渡效果
ansition = 'transform 0s';
ansform = `translateY(${distance}px)`
}
})
// ⼿指松开时
container.addEventListener('touchend', function (e) {
/
/ 回弹的动作可以给个1s的过渡效果
ansition = 'transform 1s';
// 如果下拉差值并没有达到则直接回弹
if (distance > 0 && distance < 100) {
ansform = `translateY(0px)`
return;
}
if (distance > 100) {
// 下拉差值达到了就显⽰刷新中，并暂时定格在这个位置
ansform = `translateY(100px)`;
/
/ 等数据回来后显⽰刷新成功1s然后再回弹到这⾥本次整个下拉执⾏完毕
setTimeout(() => {// setTimeout模拟异步请求真实开发这⾥是⼀个promise请求
// 这个setTimeout让刷新成功显⽰⼀秒后再回弹
setTimeout(() => {
ansform = `translateY(0px)`
}, 1000)
}, 2000);
}
// ⼀次下拉结束后重置差值
distance = 0;
})
</script>
</html>
效果如图所⽰:
2.上拉加载
前置js知识点: 三个dom属性
*clientHeight：不包含边框的元素可视区⾼度
*scrollTop：元素滚动时卷上去的距离
*scrollHeight: 元素实际⾼度，包含卷上去的⾼度
知道了上述三个属性后，于是就有了⼀个公式:
clientHeight + scrollTop <= scrollHeight - 触底的指定距离
然后就是上拉加载的原理:
通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据
知道了原理和三者之间的关系后，我们就知道只需要判断这个公式即可知道滚动条有没有进⼊触底距离，话不多说show code~ <!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="cdn.bootcdn/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>
效果如图：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发表评论