Question

在Angular / Ionic应用程序中，我正在尝试创建效果，向下滚动屏幕会隐藏副标题，如下面的编码器中所示。

问题：然而，当您停止滚动时，会出现不是我们想要的子标题。我们只希望在向上滚动N像素时显示子标题，而不是在我们停止滚动时。

我们如何解决问题？

Answer 1

我不相信上面是OP正在寻找的东西，因为你仍然希望菜单在向上滚动时出现，无论页面在哪里，导致菜单出现停止的错误都是一个简单的操作员问题，它应该在哪里

if ($rootScope.slideHeaderPrevious > e.detail.scrollTop - start)

而不是

if ($rootScope.slideHeaderPrevious >= e.detail.scrollTop - start)

当您认为前一个值在停止时相等时，这是有意义的，导致条件为真

在这里工作 http://codepen.io/markfarl/pen/NNYyjQ

Answer 2

我已对现有代码进行了更改以满足您的要求

<强>脚本

angular.module('starter', ['ionic'])

.controller('MyCtrl', function($scope, $ionicScrollDelegate, $rootScope) {
  $rootScope.slideHeader = false;
  $rootScope.pixelLimit = 100;
})

.directive('scrollWatch', function($rootScope) {
  return function(scope, elem, attr) {

    elem.bind('scroll', function(e) {
      if(e.detail.scrollTop < $rootScope.pixelLimit) {
        $rootScope.slideHeader = false;
      } else {
        $rootScope.slideHeader = true;
      }
      $rootScope.$apply();
    });
  };
});

如果您的顶部滚动位置超出了$rootScope.pixelLimit设置的限制，则隐藏子标题，否则可见。您可以使用$rootScope.pixelLimit设置自己的限制。

<强> See Codepen

在Ionic / Angular中向下滚动隐藏子标题

2 个答案: