Question

我有一个自定义＆lt; <离子头>具有CSS剪辑路径的背景设计，可创建倾斜的外观。我希望能够将导航栏更改为标准离子导航栏设计，因为使用向下滚动页面。

我想要实现的是当用户向下滚动时我希望它更改为标准导航栏，并且当用户滚动到页面顶部以返回到我的自定义背景时

<ion-header no-border class="discoverHeaderx" >

  <ion-navbar  class="feedNavbarDiscover" no-fixed no-border>

    <button ion-button menuToggle>
      <ion-icon name="menu" color="purple"></ion-icon>
    </button>

    <ion-title ></ion-title>

  </ion-navbar>


</ion-header>

SCSS

.discoverHeaderx{
    background-size: cover;
    border:none; 
    background: url('../assets/img/discover_bg.svg');
    background-color:#ffe680;
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

Answer 1

您可以使用Content中的ionic-angular执行此操作。所以在你的.TS文件中你需要这个：

import { ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

export class YourPage {
  @ViewChild(Content) content: Content; // getting a reference to the content
  public offsetFromTop: number = 0;

  // EVERYTIME YOU SCROLL YOUR PAGE IT'LL GET THE NUMBER OF PX IT HAS SCROLLED AWAY FROM THE TOP
  checkIfTop() {
    this.offsetFromTop = this.content.scrollTop;
  }
}

在您的HTML中，您将有条件地使用自定义标题的课程

<ion-header no-border [ngClass]="{'discoverHeaderx': offsetFromTop == 0}">
  <!-- THIS'LL ADD YOUR CLASS IF THE USER IS ON TOP OF THE PAGE, IF YOU 
       WANT TO SHOW THE CUSTOMIZED HEADER EARLIER YOU CAN USE offsetFromTop < x AND X BEEING A NUMBER YOU WANT. -->
  <ion-navbar  class="feedNavbarDiscover" no-fixed no-border>
    <button ion-button menuToggle>
      <ion-icon name="menu" color="purple"></ion-icon>
    </button>
    <ion-title ></ion-title>
  </ion-navbar>
</ion-header>

为此，您需要在离子内容中添加一个滚动事件，以便在每次滚动时执行您的功能

<ion-scroll (ionScroll)="checkIfTop()">
  ...
</ion-scroll>

关于非固定标题的问题与第一个关于＆＃34;切换＆＃34;的问题相同。标题。但是fyi的标题总是固定在页面的tp上，如果你在<ion-content>中使用它，它就不会出现，但在你的情况下，因为你只想切换标题样式，代码就可以了。

希望这有帮助。

如何在Ionic 2中更改标题/导航栏

1 个答案: