Question

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

我想知道如果用户正在触摸或移动（我相信＆＃39;触摸＆＃39;触摸移动＆＃39;），我怎么能使页面滚动和拉动刷新不激活图形，但一旦它们停止触摸图形，页面滚动和拉动刷新的正常功能将再次起作用。

谢谢。

Answer 1

考虑到ons-pull-hook归因于disabled（Documentation），您可以轻松实现这一目标。

使用div将图表包裹在id="myGraph"元素中，并在disabled元素中执行触摸操作时设置div属性。触摸操作结束后，应再次启用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如何在拖动图形元素时禁用页面滚动和拉动刷新？

1 个答案: