html仿照聊天下拉刷新,h5实现下拉刷新，模拟原生下拉刷新，封装组件

上一篇，我们实现了h5 实现向左平滑，出现按钮操作，封装组件，模拟购物车左滑删除，现在我们将要实现一个下拉刷新的组件，模拟原生下拉刷新的操作。这对h5手势的要求也是蛮高的，接下来，我们就一步一步的实现下拉刷新的操作。

需求背景

在原生app中嵌入h5页面，有些页面需要下拉刷新操作，一般比较简单的方法就是使用其他框架封装的下拉刷新，比如说mint-ui框架中的loadmore组件就可以实现下拉刷新操作，但是样式上可能就和整个app的风格不一致了。既然都是封装好的组件，那为什么我们不能自己封装一个组件，并且样式风格由我们自己来定了。

基础知识

touchstart事件：事件对象event，包含手指触摸的位置

touchmove事件：事件对象event，包含手指滑动的位置

touchend事件：事件对象event，包含手指离开屏幕的位置

封装组件

1. 首先我们先考虑下拉刷新的html结构

下拉刷新的文字有三种状态，下拉刷新=>释放刷新=>加载中，下面代码中刷新距离是自己定义的。

下拉即可刷新：页面下拉距离 < 刷新的距离

释放即可刷新：页面下拉距离 >= 刷新的距离

加载中：页面下拉距离 >= 刷新距离 && 手指释放

2. css样式

首先，下拉刷新的文字部分，一开始隐藏的，下拉出现

其次，slot部分的样式，我们可以忽略

.pull-refresh {

height: calc(~'100vh - 50px');

.pull-refreshing-text {

margin-top: -50px;

line-height: 50px;

height: 50rem;

font-size:14px;

color: #5a5a5a;

text-align: center;

}

}

最后下拉刷新的三种状态，我们定义一个下拉