OStack程序员社区-中国程序员成长平台

标题: javascript - 停止动量滚动 ontouchstart ngTouch AngularJS [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 22:58
标题: javascript - 停止动量滚动 ontouchstart ngTouch AngularJS

我有一个带有 -webkit-overflow-scrolling:touch 的 div，其中包含项目列表。

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

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

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

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

希望我的问题很清楚......

---

Best Answer-推荐答案

最近我在 angular-ionic-typeScript 项目中遇到了同样的问题。 这是我如何解决的:

我创建了一个自定义指令:

angular.module('directive.scrolldetector', [])
    .directive('scrollDetector', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$on('$destroy', () => {
                element.off("scroll");
            });

            element.on('scroll', function () {
                scope.$evalAsync(function () {
                    scope.$eval(attrs.scrollDetector);
                });
            });
        }
    }
});

现在您可以像这样检测 onScrollEvent:

<ion-content scroll-detector="onScroll()">
...
</ion-content>

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

onScroll = () => {
    lastScrollTimestamp = (new Date()).getTime();
}

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

onClick = () => {
     if( lastScrollTimestamp + 300 > (new Date()).getTime()) { //at least 300ms there was no scrolling
          //do your stuff
     }
}

关于javascript - 停止动量滚动 ontouchstart ngTouch AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24242926/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4