pulltorefresh.js - 暂时禁用

Question

我正在使用这个 PullToRefresh 插件：

https://github.com/BoxFactura/pulltorefresh.js#api

它运行良好，但我的页面上有一个带有 div 内联滚动的弹出窗口。问题是当我想向上滚动时（在 div 中），触发了 PullToRefresh。当我的弹出窗口打开时，是否可以 "delete" 或暂时禁用 PullToRefresh？

PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function(){
        refreshAll();
    }
});

编辑： delete PullToRefresh; // 无效

编辑2： https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js

Answer 1

PullToRefresh.init() 将 return 具有 destroy() 函数的对象作为回调：https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js#L326

var refresher = PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function(){
        refreshAll();
    }
});

// destroy the PullToRefresh EventListeners when you open your popup
refresher.destroy()

还有一个未解决的 Github 问题，关于改进初始化后销毁该库的方式：https://github.com/BoxFactura/pulltorefresh.js/issues/22

Answer 2

IMO 有两种合理的方法可以做到这一点。

您可以定义一个 triggerElement 并将叠加层放在此 triggerElement 之外：

PullToRefresh.init({
    mainElement: 'body',
    triggerElement: '#mainContent',
    onRefresh: refreshAll
});

标记有点像这样

<body>
    <div id="containerForOverlays"></div>
    <div id="mainContent"></div>
</body>

这样，#containerForOverlays 中的所有内容都不会触发刷新。

或者如果您的版本已经支持，您可以使用新的钩子 shouldPullToRefresh()。

一个示例，其中 PullToRefresh 取决于要选中的复选框

<label><input id="refresh" type="checkbox"> Pull to Refresh?</label>

像

一样使用它

PullToRefresh.init({
    mainElement: 'body',
    shouldPullToRefresh: function(){
        return document.getElementById('pullToRefresh').checked
    },
    onRefresh: refreshAll
});

当然，我并不是建议您在生产代码中使用复选框。我只是想展示如何动态 "turn PullToRefresh on and off"。本例中，取决于要勾选的复选框。

由您为您的应用程序实施正确的 shouldPullToRefresh() 以确定 PullToRefresh 是否应该激活。

pulltorefresh.js - 暂时禁用

pulltorefresh.js - Disable temporarily

javascript

pull-to-refresh