ahao-pull-down-refresh

简介

移动端下拉刷新js组件
0依赖
适用Ios和Android端h5页面
不算太慢

安装

``
npm i ahao-pull-down-refresh -S

`

用法

`
import pullDownRefresh from 'ahao-pull-down-refresh'

const listDom=document.getElementById("list")
new pullDownRefresh({
el: listDom,
textTop: listDom.offsetTop + 5,
// scrollEl: document.documentElement 是监听滚动到顶部的dom对象,如果过不写一般是document.documentElement
// text:'↓ 下拉可以刷新', 默认
// textEnd:' ↑ 释放立即刷新',默认
// maxDistance:130 默认
callback: () => {
console.log('cb');
}
})
``

## 参数详解
el和textTop参数必填
el：
是当监听页面滚动达到顶部，手势还在向下滑动的时候，el传入的dom元素会跟着向下移动，到达下拉的效果
textTop：
代表text到顶部的距离，由于text是fixed定位，所以需要你动态去设置他的top
callback：
当下拉到达maxDistance最大距离后，会触发callback回调
text：
下拉时候展示的文案，由于内部是innerHTML实现，你可以写html标签字符串
!image

原理

是当监听页面滚动达到顶部，手势还在向下滑动的时候，el传入的dom元素会跟着向下移动，到达下拉的效果 。
当下拉到一定距离也是maxDistance，我们会触发callback回调，并改变text的文案成为textEnd。
松开手后el会自动回退到原始位置