H5 下拉刷新如何实现

H5 下拉刷新如何实现

最近我需要做一个下拉刷新的功能，实现功能后我发现，它需要处理的情况还蛮多，于是我整理了这篇文章。

下图是我实现的效果，分为三步：开始下拉时，屏幕顶部会出现加载动画；加载过程中，屏幕顶部高度保持不变；加载完成后，加载动画隐藏。

首先我会讲解下拉的原理、根据原理写出初始代码；然后我会说明代码存在的缺陷、解决缺陷并做些额外优化；最后我会给出完整代码，并做一个总结。

拳打 H5，脚踢小程序。我是「小霖家的混江龙」，关注我，带你了解更多实用的前端武学。

下拉的原理

如图所示，蓝色框代表视口，绿色框代表容器，橙色框代表加载动画。最开始时，加载动画处于视口外；开始下拉之后，容器向下移动，加载动画从上方进入视口；结束下拉后，容器又开始向上移动，加载动画也从上方退出视口。

下拉基础代码

知道原理，我们现在开始写实现代码，首先是布局的代码：

布局代码

我们把 box 元素当作容器，把 loader-box，loader-box + loading 元素当作动画，至于 h1 元素不需要关注，我们只把它当作操作提示。

<div id="box">
  <div class="loader-box">
    <div id="loading"></div>
  </div>
  <h1>下拉刷新 ↓</h1>
</div>

loader-box 的高度是 80px，按上一节原理中的分析，初始时我们需要让 loader-box 位于视口上方，因此 CSS 代码中我们需要把它的位置向上移动 80px。

.loader-box {
  position: relative;
  top: -80px;
  height: 80px;
}

oader-box 中的 loader 是纯 CSS 的加载动画。我们利用 border 画出的一个圆形边框，左、上、右边框是浅灰色，下边框是深灰色：

#loader {
  width: 25px;
  height: 25px;
  border: 3px solid #ddd;
  border-radius: 50%;
  border-bottom: 3px solid #717171;
  transform: rotate(0deg);
}

开始刷新时，我们给 loader 元素增加一个