详细信息
mkPullFresh 是一个小巧而简单的 jQuery 拉/刷刷新插件，可以像原生移动应用程序一样将更多内容加载到当前页面。
该插件提供了一种在 Web 应用程序上实现拉动/滑动刷新用户界面模式的简单方法，该模式允许用户通过使用鼠标拖动或触摸滑动下拉当前数据列表来异步检索更多内容。
如何使用它：
1. 将jQuery 库和mkPullFresh 插件的文件添加到网页中。
<link href="/path/to/build/mk-pullfresh.css" rel="stylesheet" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/build/mk-pullfresh.js"></script>2. 将该功能附加mkPullFresh()到您的数据列表并在拖动/触摸端执行某些操作。
<div id="example">
<p>Pull this text down by mouse or finger and drop it to refresh content of the box.</p>
....
</div>$('#example').mkPullFresh(function(end){
// custom function to load more content
end(); // stop pending state
});3. 使用以下 CSS 来防止“无法在被动事件侦听器中阻止默认”错误。
#example {
-ms-touch-action: pan-y;
touch-action: pan-y;
}4.自定义CSS中的加载指示器。
$('#example').mkPullFresh({
indicatorHtml: '<div class="mkpf-envelop"><div class="mkpf-indicator-wrapper"><div class="mkpf-indicator"><div class="mkpf-icon-wrapper"><i class="mkpf-arrow-down"></i></div><i class="mkpf-spinner"></i></div></div></div>'
});5. 或者使用受Material Design启发的加载指示器。
<div id="example" class="mkpf-material">
<p>Pull this text down by mouse or finger and drop it to refresh content of the box.</p>
....
</div>6.更多可能的选择。
$('#example').mkPullFresh({
// drag/touch threshold in pixels
maxShift: 100,
readyShift: 60,
pendingShift: 60,
// callback or milliseconds to stop pending refresh(end)
refresh: null
});7. 事件处理程序。
$('#example').mkPullFresh({
emitEvents: true
})
.on('mkPullFreshStart', function(e,y,pf){
// do something
})
.on('mkPullFreshPull', function(e,y,pf){
// do something
})
.on('mkPullFreshPending', function(e,end,pf){
// do something
})
.on('mkPullFreshEnd', function(e,pf){
// do something
})
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。