下拉刷新原理

1、借助fixed定位 然后改变top做下拉移动效果

.home-container{
   
    position: fixed;
    top:100px;
    left:0;
    width:100%;
    overflow-y:auto;
    height: calc(100vh - 221px);
    background-color: #FFF;
}

2、核心代码，借助touchstart touchmove touchend 事件监听做处理

• 一开始触发移动 就会执行 touchstart事件，记录当前的Y坐标 startY
• 监听touchMove、touchEnd事件
• 鼠标移动 实时记录鼠标Y坐标 ，pageY ， pageY - startY就是移动的距离distance
  也就是最新的top值 是开始top再加鼠标移动距离： element.style.top = startTop + distance +‘px’
• 松开手指 就要实现回弹效果， 会触发 touchend事件， 刚才如果移动超过30px 就会执行回调事件（刷新数据的事件）
• requestAnimationFrame(_back); 就是做回弹的样式处理
• currentTop - originalTop >=1 :当前距离大于 原始top距离 就频繁的-1处理， 再递归调用 requestAnimationFrame(_back);
• 最后 currentTop - originalTop <1 说明到顶部了 就设置回原始top: element.style.top = originalTop +‘px’;// ease in

/**
 * 下拉刷新
 * @param element 元素
 * @param callback 回调
 */
export function downRefresh(element:HTMLElement,callback:Function){
   
   let startY:number;//开始的时候的纵坐标
   let distance:number;