web - 移动 - 使用 Ionic 滚动时，浏览器添加栏不会隐藏

Question

当 Ionic 应用程序部署在网络中并且您通过电话访问它时，酒吧地址永远不会消失。我知道这是因为 ion-content 或类似的东西，但我没有找到任何解决方法或有关此的信息，只有 Ionic 2 的 github 中的一个问题。

还没有办法隐藏浏览器地址栏吗？这对 Ionic 来说是一个真正的失败......

标签： webionic-frameworkprogressive-web-apps

Answer 1

我在ionic5中做到了。但我的解决方案删除了​​导航动画。

而且不是很干净。但是没有人知道如何隐藏移动访问栏。

所以揭示我的解决方案。

如果您找到更好的解决方案，请告诉我:)

在 global.scss

//mobile access bar auto hide system
.plt-mobileweb {
    ion-action-sheet {
        position: fixed;
    }
    ion-modal {
        position: fixed;
    }
    ion-picker {
        position: fixed;
    }
    body {
        max-height: initial;
        height: initial;
        overflow: scroll;
        position: static;
        overscroll-behavior-y: initial;
        -webkit-overflow-scrolling: touch;
    }
    body.backdrop-no-scroll {
        overflow: hidden;
    }
    ion-app.ion-page {
        left: initial;
        right: initial;
        top: initial;
        bottom: initial;
        display: initial;
        position: initial;
        flex-direction: initial;
        justify-content: initial;
        contain: initial;
        overflow: initial;
    }
    ion-router-outlet {
        left: initial;
        right: initial;
        top: initial;
        bottom: initial;
        position: initial;
        contain: initial;
        z-index: initial;
        overflow: initial;
    }
    ion-router-outlet {
        .ion-page {
            left: initial;
            right: initial;
            top: initial;
            bottom: initial;
            display: initial;
            position: initial;
            flex-direction: initial;
            justify-content: initial;
            contain: initial;
            overflow: initial;
        }
        ion-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 11;
        }
        ion-footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 11;
        }
        ion-content {
            display: initial;
            position: initial;
            width: initial;
            height: initial;
            font-family: var(--ion-font-family, inherit);
            contain: initial;
            flex: initial;
            margin: initial;
            padding: initial;
        }
        ion-tabs {
            display: initial;
            position: initial;
            top: initial;
            left: initial;
            right: initial;
            bottom: initial;
            flex-direction: initial;
            width: initial;
            height: initial;
            contain: initial;
            z-index: initial;
        }
        div.tabs-inner {
            position: initial;
            flex: initial;
            contain: initial;
            padding-bottom: 56px;
        }
        ion-tab-bar {
            width: 100%;
        }
        ion-tab-bar[slot=top] + div.tabs-inner {
            padding-bottom: 0;
        }
        ion-tab-bar[slot=top] {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        ion-tab-bar[slot=bottom] {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}

并做出指示

@Directive({
  selector: 'ion-content'
})
export class MobilewebContentDirective {

  minHeight = {
    ios: 50,
    md: 56
  }

  constructor(
    private el: ElementRef,
    private plt: Platform
  ) {
    
  }

  ngOnInit() {
    if(this.plt.is('mobileweb') || this.plt.is('desktop')) {
      const observer = new MutationObserver(mutations => {
        for(let i = 0; i < mutations.length; i++) {
          const children = this.el.nativeElement.shadowRoot.children;
          let main:HTMLElement | null = null;
          let background:HTMLElement | null = null;
          for(let i = 0; i < children.length; i++) {
            if(children[i].tagName === 'MAIN') {
              main = children[i];
            }
            if(children[i].id === 'background-content') {
              background = children[i];
            }
          }

          if(background) {
            background.style.position = 'fixed';
          }

          if(main) {
            //default setting for body scroll
            observer.disconnect();
            main.style.position = 'relative';
            main.style.bottom = 'initial';
            main.style.overflowY = 'hidden';
            main.style.touchAction = 'manipulation';
            
            main.style.width = '100%';
            main.style.marginLeft = 'auto';
            main.style.marginRight = 'auto';

            const header = this.el.nativeElement.previousSibling;
            const footer = this.el.nativeElement.nextSibling;

            if(header) {
              //header
              main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
            } else {
              //tab (temperatory)
              main.style.marginTop = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
            }
            if(footer) {
              main.style.paddingBottom = (this.plt.is('ios') ? this.minHeight.ios : this.minHeight.md) + 'px';
            }
            //reset scroll (should add some more functions)
            window.scrollTo(0, 0);
            break;
          }
        }
      });
      observer.observe(this.el.nativeElement.shadowRoot, {childList: true});
    }
  }
}