高性能下拉刷新和无限滚动,丰富的hook,自定义
高性能下拉刷新和无限滚动,丰富的hook,自定义无限可能。
使用html结构要有2层
<div class="wrapper">
<ul>
....
</ul>
</div>
new MePullRefresh({
...
})
参数说明
el
滚动元素的父级,如上wrapper
classNames下拉刷新松手后的恢复动画是基于此样式 如:
.transitioning {
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
其中transition-property只能写transform,因为后面会用transitionEnd事件监听整个下拉动画结束
usePtr是否使用下拉刷新,默认false
ptrDistance下拉的有效距离
ptrTime数据加载完成后延迟时间,默认1s,防止数据加载过快,导致动画一闪而过
useInfinite是否使用无限滚动,默认false
infiniteDistance滚动到距离底部的距离
实例方法 ptrStartFn下拉开始的回调,触发一次
ptrMoveFn下拉移动过程中的回调
ptrWillRefreshFn下拉距离到达 ptrDistance
时触发一次
下拉距离大于等于 ptrDistance
,松手时触发一次
整体下拉动画结束触发一次
ptrDone重置下拉刷新,用于数据请求成功后调用
infiniteStartFn滚动距离到达scrollHeight - infiniteDistance
触发一次
滚动距离介于scrollHeight - infiniteDistance
和 bottom
滚动到最底部,触发一次
infiniteDone重置无限滚动,请求数据成功后调用
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。