open:ionic-hide-nav-bar

Ionic hide nav bar

http://stackoverflow.com/questions/35053523/how-to-hide-header-bar-in-ionic

snippet.javascript
  <script id="templates/home.html" type="text/ng-template">
    <ion-view title="Home" hide-nav-bar="true">
      <ion-content padding="true">
        <p>Test</p>
      </ion-content>
    </ion-view>
  </script>

https://forum.ionicframework.com/t/hide-navbar-tabs-when-scrolling-down-like-instagram/10197/2

snippet.javascript
angular.module('ionic.example', ['ionic'])
 
.directive('fakeStatusbar', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>'
  }
})
.directive('headerShrink', function($document) {
  var fadeAmt;
 
  var shrink = function(header, content, amt, max) {
    amt = Math.min(44, amt);
    fadeAmt = 1 - amt / 44;
    ionic.requestAnimationFrame(function() {
      header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
      for(var i = 0, j = header.children.length; i < j; i++) {
        header.children[i].style.opacity = fadeAmt;
      }
    });
  };
 
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var starty = $scope.$eval($attr.headerShrink) || 0;
      var shrinkAmt;
 
      var header = $document[0].body.querySelector('.bar-header');
      var headerHeight = header.offsetHeight;
 
      $element.bind('scroll', function(e) {
        var scrollTop = null;
        if(e.detail){
          scrollTop = e.detail.scrollTop;
        }else if(e.target){
          scrollTop = e.target.scrollTop;
        }
        if(scrollTop > starty){
          // Start shrinking
          shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop);
          shrink(header, $element[0], shrinkAmt, headerHeight);
        } else {
          shrink(header, $element[0], 0, headerHeight);
        }
      });
    }
  }
})

  • open/ionic-hide-nav-bar.txt
  • 마지막으로 수정됨: 2020/06/02 09:25
  • 저자 127.0.0.1