桌面和移动设备的简单下拉刷新 - mkPullFresh

版本:

浏览量:1591

最后更新：2021-09-11

应用标签：Jquery插件 MAC 软件 git

推荐指数:

查看演示点击下载

详细信息

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
})

联系我们

免费复制

微信扫码关注领取验证码

注:需在公众号回复"验证码