简介

移动端下拉刷新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标签字符串

原理

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