Question

我尝试在滚动条上隐藏副标题。在我的指令中，我有以下代码：

.directive('scrollWatch', function($rootScope) {
  return function(scope, elem, attr) {
    var start = 0;
    var threshold = 150;

    elem.bind('scroll', function(e) {

      if(e.target.scrollTop - start > threshold) {
        $rootScope.slideHeader = true;
      } else {
        $rootScope.slideHeader = false;
      }
      if ($rootScope.slideHeaderPrevious >= e.target.scrollTop - start) {
        $rootScope.slideHeader = false;
      }
      $rootScope.slideHeaderPrevious = e.target.scrollTop - start;
      $rootScope.$apply();
    });
  };

})

并在我的page.html中：

<ion-view title="Job Post " id="page8"  hide-nav-bar="true" class="bar-positive " hide-back-button="false"  ng-class="{'bar-subheader-slide-away': slideHeader}" >

  <ion-header-bar class="bar-positive">
        <h1 class="title">Ionic Sub Header Show/Hide on Scroll</h1>
      </ion-header-bar>
      <ion-header-bar class="bar-subheader bar-dark">
        <h1 class="title">Hide this sub header on scroll down and display on scroll up!</h1>
      </ion-header-bar>


    <ion-content padding="false" class="has-footer" id="jobdetailsWrapper"  scroll-watch>



    <a class="item" href="#">
    List Item
    </a>
    <a class="item" href="#">
    List Item
    </a>
    <a class="item" href="#">
    List Item
    </a>
    <a class="item" href="#">
    List Item
    </a>
    <a class="item" href="#">
    List Item
    </a>
    <a class="item" href="#">
    List Item
    </a>

    </ion-content>


</ion-view>

但没有任何反应。子标题保留在那里，我没有收到任何错误。我怎样才能解决这个问题？

Answer 1

这些示例或codepen适用于离子1.0 beta。所以如果你在离子v1.3.2“法国”工作。使用接下来的步骤：

委托 - 句柄（名称）和滚动（功能）

<ion-content on-scroll="getScrollPosition()" delegate-handle="mainScroll">...</ion-content>

在ion-nav-bar中添加ng-class

<ion-nav-bar ng-class="{'hide-header': slideHeader}">...</ion-nav-bar>

向 slideHeader

添加操作

$scope.posAnt = 0;
$scope.getScrollPosition = function(){
  var pos = $ionicScrollDelegate.$getByHandle('mainScroll').getScrollPosition().top;
  if(pos < $scope.posAnt){
    $scope.slideHeader = false;
  }else{
    $scope.slideHeader = true;
  }
  $scope.posAnt = pos;
  $scope.$apply();
}

现在只需将CSS添加到类hide-header。

示例

.hide-header .bar-header{ display: none; }

提示：请根据需要使用平台系统（ios，android）。

.platform-android .hide-header .bar-header .platform-ios .hide-header .bar-header

函数getScrollPosition的工作方式类似于Android 6.0的Youtube应用程序。因此，当您向下滚动条形标题隐藏时以及向上滚动条形标题显示时。

根据需要更改getScrollPsotion。
祝你好运。

在scorlling上的离子隐藏子标题

1 个答案: