之前写了上拉加载，当然也就有下拉刷新。下拉刷新在web项目中使用会比上拉加载少。这边补充两点：

1、上拉加载和下拉刷新最大意义是说明原理；

2、全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

下拉刷新原理：

监听touchStart、touchMove、touchEnd，当手指触碰的时候，记录当前位置，然后移动的时候判断，滚动条为0，且移动的距离（当前pageY减去初始触碰的pageY）大于0小于设定的某个值的时候，让加载动画的高度等于移动的距离。移动结束的时候，判断是否大于某个高度，大于就触发刷新方法。

    复制代码

使用：

    复制代码

随便找一个vue项目跑起来就可以看了，这边发现微信发布的时候代码都乱码了，考下来之后格式化一下。

已经部署到npm包：

下载：

Npm install wade-ui -S

欢迎关注Coding个人笔记 公众号