拉动刷新 Javascript答案

【问题标题】：Pull to Refresh Javascript拉动刷新 Javascript
【发布时间】：2011-11-13 09:35:25
【问题描述】：

我正在使用 JQuery Mobile，我已经看到了几个 Pull to Refresh Scripts。

我特别喜欢this one，但即使是演示也似乎无法在他们的网站上运行。

我的问题是...有谁知道刷新网络应用脚本的任何有效拉动？

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

这是一个示例实现：http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

使用了iScroll。

【讨论】：

两个链接的结果都是 404

【解决方案2】：

我已经构建了自己的 jQuery / jQuery Mobile 插件（支持拉动刷新和无限滚动）：https://github.com/zippy1978/jquery.scrollz

【讨论】：

嗨 Zippy，我真的很喜欢你的插件，但我不知道为什么它会让滚动变得困难。我的意思是它以某种方式删除了我的窗口滚动事件并且滚动变得有点粗糙。此外，当我“到达底部”时，它会滚动到顶部而不是停留在同一位置。我希望这可以帮助您改进您的插件。目前我正在编写自己的代码，但如果您可以在您的插件中解决上述问题，请告诉我我想使用您的插件。

【解决方案3】：

Demo

Code Base 拉动刷新

【讨论】：

【解决方案4】：

$("body").ready(function _onbodyready() {
    var $feedback = $('#feedback');
    $("#main-content-div")
      .pullToRefresh()
     .on("end.pulltorefresh", function (e, percent){
      $feedback.html("ok");
   })
     .on("move.pulltorefresh", function (e, percent){
      $feedback.html(percent + ' %');
     })

});

【讨论】：

【解决方案5】：

在这里强烈推荐Pull to Refresh 库。刚刚实施，效果很好。

对于基本功能，请访问他们的GitHub 并下载 index.umd.min.js 文件并将其包含在内。然后，使用以下代码：

PullToRefresh.init({
  mainElement: '#main_div',
  onRefresh: function() { location.reload(); }
});

这将模仿您在this demo 中看到的功能

【讨论】：