ion-header 动态高度处理(content) （实用、赞）

最新推荐文章于 2025-06-22 06:09:26 发布

转载最新推荐文章于 2025-06-22 06:09:26 发布 · 594 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/66b877c0eada

文章标签：

#scss #css #html

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

本文介绍了两种在Ionic应用中处理内容区域动态调整的方法。第一种是通过调用`content.resize()`方法来更新内容区域的大小，特别是在工具栏显示或隐藏时。第二种方法是使用自定义指令来实现动态高度的SubHeader。这些技巧对于优化 Ionic 应用的用户体验至关重要。

方法一: 利用content.resize() 方法
参考：【技巧】ionic3中content的resize知多少

@Component({
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Main Navbar</ion-title>
      </ion-navbar>
      <ion-toolbar *ngIf="showToolbar">
        <ion-title>Dynamic Toolbar</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
    </ion-content>
`})

class E2EPage {
  @ViewChild(Content) content: Content;
  showToolbar: boolean = false;

  toggleToolbar() {
    this.showToolbar = !this.showToolbar;
    this.content.resize();
  }
}

方法二：用指令
参考：IONIC自定义动态高度SubHeader的解决方案