Ionic 2：在 iOS 上滚动时运行函数

Posted 2023-03-14

【中文标题】Ionic 2：在 iOS 上滚动时运行函数

【英文标题】：Ionic 2: Run functions while scrolling on iOS

【发布时间】：2017-06-12 16:37:49

【问题描述】：

我试图在滚动时执行一些功能。基本上，如果满足某个滚动位置，我希望应用程序做一些事情。

这里是一些代码：

  ionViewDidLoad() 
    this.content.ionScroll.subscribe((event) => 
      this.scrollPosition = event.scrollTop;
      if(this.scrollPosition >= 100)
        console.log("more than 100");
      
      else 
        console.log("less than 100");
      
    );
  

它在网络浏览器或 android 设备上按预期工作，它在滚动时重复运行条件内的“console.log()”。 相反，在 ios 上，它等待滚动停止，然后执行 console.log()。 出于性能原因，我正在阅读 iOS 上的 javascript 在滚动时停止。有解决办法吗？

【问题讨论】：

大约一年前，我创建了jquery-do-scroll 作为 iPad 中这种情况的解决方法，但我不确定它是否可以以 natural 方式与 ionic 框架一起使用.基本上，这个插件使用触摸事件来滚动一些易于使用的功能。

您是否尝试过使用github.com/ionic-team/cordova-plugin-wkwebview-engine 插件？滚动事件在使用时应该会按预期工作。

其实我没有，我试试，谢谢

【参考方案1】：

Safari 直到滚动完成后才会触发滚动事件，因此在这种情况下您必须进行一些自定义事件侦听。

查看这篇文章：javascript scroll event for iPhone/iPad?

可以这样实现：

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() 
    //start of scroll event for iOS


function Scroll() 
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers

我建议创建一个指令，使用 HostListener 来监听这两个事件。

【讨论】：

谢谢，这很有帮助，但只有当我将手指放在屏幕上时，才会执行函数“ScrollStart()”。如果我向下滑动并将手指从屏幕上移开，它将停止执行，而视图仍在滚动。我需要随时知道滚动位置。有什么建议吗？

那你还得听touchStart。 developer.apple.com/documentation/webkitjs/touchevent

我阅读了文档，但所有这些事件仅在手指触摸表面时发生。只要您松开手指，它们就会停止发射，无论视图是否仍在滚动。还是谢谢