使用 OnsenUI 如何在拖动图形元素时禁用页面滚动和下拉刷新？

Question

我正在使用 Cordova 和 OnsenUI 创建一个应用程序。 OnsenUI 具有下拉刷新功能。我还使用 dygraphs 显示图表。用户可以捏缩放图形，然后在放大后拖动图形以查看图形的不同部分。但是，一旦用户在图形上向下拖动，图形就会移动，但它也会开始激活下拉 -刷新。此外，如果用户使用的是小屏幕 phone 并且您必须向下滚动才能看到图表，如果他们向上滚动图表，则会导致整个页面向上滚动。

我想知道如果用户触摸或移动图表（我相信 'touch' 和 'touchmove'）如何使页面滚动和下拉刷新不激活，但是一旦他们停止触摸图表，页面滚动和下拉刷新的正常功能将再次起作用。

谢谢。

Answer 1

考虑到 ons-pull-hook 具有 disabled 属性 (Documentation)，您可以轻松实现此目的。

用 id="myGraph" 将图表包裹在 div 元素中，并在 div 元素中执行触摸操作时设置 disabled 属性。一旦触摸操作结束，ons-pull-hook 应该再次启用。

代码如下：

ons.ready(function() {
  var graph = document.getElementById("myGraph");
  var pullHook = document.querySelector("ons-pull-hook");

  graph.addEventListener('touchstart', function () {
    pullHook.setAttribute("disabled", true);
  });

  graph.addEventListener('touchend', function () {
    graph.removeAttribute("disbled");
  });
});

希望对您有所帮助！

使用 OnsenUI 如何在拖动图形元素时禁用页面滚动和下拉刷新？

With OnsenUI how do I disable page scroll and pull-to-refresh when dragging on a graph element?

dygraphs

cordova

onsen-ui