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;