菜鸟教程小白 发表于 2022-12-12 22:58:29

javascript - 停止动量滚动 ontouchstart ngTouch AngularJS


                                            <p><p>我有一个带有 -webkit-overflow-scrolling:touch 的 div,其中包含项目列表。</p>

<p>我正在使用 Angular ngTouch,它将我的所有 ng-click 处理为 phonegap 应用程序上的点击事件。</p>

<p>但是,当我滚动我的列表,并且 ios 原生动量滚动启动时,我也希望能够通过点击停止动量滚动,就像在原生 ios 应用程序上一样。 </p>

<p>发生的情况是触发了另一个点击事件。所以我的问题是:</p>

<p>如何在不触发另一个实际的点击事件的情况下停止动量( native )滚动,而不触发另一个实际的点击事件...</p>

<p>希望我的问题很清楚......</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>最近我在 angular-ionic-typeScript 项目中遇到了同样的问题。
这是我如何解决的:</p>

<p>我创建了一个自定义指令:</p>

<pre><code>angular.module(&#39;directive.scrolldetector&#39;, [])
    .directive(&#39;scrollDetector&#39;, function ($window) {
    return {
      restrict: &#39;A&#39;,
      link: function (scope, element, attrs) {
            scope.$on(&#39;$destroy&#39;, () =&gt; {
                element.off(&#34;scroll&#34;);
            });

            element.on(&#39;scroll&#39;, function () {
                scope.$evalAsync(function () {
                  scope.$eval(attrs.scrollDetector);
                });
            });
      }
    }
});
</code></pre>

<p>现在您可以像这样检测 onScrollEvent:</p>

<pre><code>&lt;ion-content scroll-detector=&#34;onScroll()&#34;&gt;
...
&lt;/ion-content&gt;
</code></pre>

<p>在滚动时,onScroll() 函数中的 where 会不断触发。在这个函数中你应该保存一个时间戳:</p>

<pre><code>onScroll = () =&gt; {
    lastScrollTimestamp = (new Date()).getTime();
}
</code></pre>

<p>最后一步是检查 ion-context 中的每个 ng-click 是否为我们的 lastScrollTimestamp:</p>

<pre><code>onClick = () =&gt; {
   if( lastScrollTimestamp + 300 &gt; (new Date()).getTime()) { //at least 300ms there was no scrolling
          //do your stuff
   }
}
</code></pre></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 停止动量滚动 ontouchstart ngTouch AngularJS,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/24242926/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/24242926/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 停止动量滚动 ontouchstart ngTouch AngularJS