实现原理

上拉加载及下拉刷新都依赖于用户交互

最重要的是要理解在什么场景，什么时机下触发交互动作

上拉加载

首先可以看一张图

上拉加载的本质是页面触底，或者快要触底时的动作

判断页面触底我们需要先了解一下下面几个属性

• scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值

• clientHeight:它是一个定值，表示屏幕可视区域的高度；

• scrollHeight：页面不能滚动时也是存在的,此时scrollHeight等于clientHeight。scrollHeight表示body所有元素的总长度(包括body元素自身的padding)

上拉加载的原理：
通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据

综上我们得出一个触底公式：

scrollTop + clientHeight >= scrollHeight

简单实现

// 滚动容器
const container = document.querySelector('.container');
// 监听滚动事件
container.addEventListener('scroll', _.debounce(function (e) {// 当元素的可视高度+滚入的距离>=元素真实高度-触底距离时,触发加载更多if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {setTimeout(() => {// 这里是一个异步加载数据的操作console.log('加载更多')}, 1000);}
}, 700))

下拉刷新

移动端触屏事件：

• touchstart(手指按下的一瞬间)
• touchmove(手指在屏幕上移时)
• touchend(手指松开时)
• 手指在页面上的坐标: pageX,pageY

下拉刷新的原理：

• 在手指按下时(touchstart)记录手指的按下位置
• 在手指下滑时(touchmove)计算手指的坐标离手指按下时初始位置的差值得出下滑的距离,让容器顺应手指下滑的方向移动(translateY)对应差值的距离,对应的给一个允许用户下滑的最大距离,避免页面下拉过长.
• 在手指松开时(touchend)判断下滑的差值是否达到预期的值来进行对应的刷新数据和回弹loading.

html部分
<section class="container"><section class="loading"><span>下拉刷新</span></section><section class="list"></section>
</section>
css部分.container {/* 容器原始位置向上移动60px,隐藏掉loading盒子,下拉时才显示出来 */position: relative;top: -100px;
}
js部分
// 滚动容器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;})