Ionic 4 [ion-content 和 app-header] 为什么当我滚动到某个元素时 header 会被截断？解决了

Question

只要点击一个元素，应用程序就会滚动到所需的位置。 header 的高度改变了一半。我不明白为什么。我该怎么做才能避免这种情况发生？有人可以帮助我或解释一下吗？

header after scroll event - problem

Header befor the Scroll event

Tab2.PAGE.HTML:

    <app-header></app-header>
    <ion-content delegate-handle="myPageDelegate" fullscreen>

                <ion-card>
                    <ion-card-header>
                        <ion-card-subtitle>Subtitle</ion-card-subtitle>
                        <ion-card-title>title</ion-card-title>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-text>Text</ion-text>
                    </ion-card-content>
                </ion-card>

                  <ion-item (click)='scrollToElement("brandenburg")'>
                        <ion-label color="primary">Brandenburg</ion-label>
                        <ion-badge slot="start">3</ion-badge>
                    </ion-item>   

           <ion-card id='brandenburg'>.... </ion-card> 

        </ion-content>

Tab2.PAGE.TS:

import { Component, ViewChild  } from '@angular/core';
import { NavController, ModalController } from '@ionic/angular';
import { ImageModalPage } from '../../../image-modal/image-modal.page';

import { IonContent } from '@ionic/angular'; 

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
    @ViewChild(IonContent, { read: IonContent, static: false }) private content: IonContent;



    constructor(private navCtrl: NavController, private modalController: ModalController) {}

    push(path) {
        this.navCtrl.navigateForward(path);
    }

    scrollToTop() {
      this.content.scrollToTop(400);
    }

    ionViewDidEnter(){
      this.scrollToTop();
    }

    scrollToElement(element) { 
        document.getElementById(element).scrollIntoView({behavior: "smooth", block: "center"});
    }




}

HEADER.COMPONENT.HTML:

<ion-header>
    <ion-toolbar>
        <ion-title>
            <img src="assets/images/logo.svg">
        </ion-title>
        <ion-buttons slot="end">
            <ion-button (click)='presentPopover($event)'>
                <ion-icon slot="start" name="more" color='light'></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="start">
            <ion-button (click)='presentmenu($event)'>
                <ion-icon slot="start" name="menu" color='light'></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

HEADER.COMPONENT.TS:

import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { PopoverComponent } from './popover/popover.component';
import { MenuComponent } from './menu/menu.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent {

    constructor(public popoverController: PopoverController) { }

    async presentPopover(ev: any) {
        const popover = await this.popoverController.create({
            component: PopoverComponent,
            event: ev,
            translucent: false,
            showBackdrop: true
        });
    return await popover.present();
    }

    async presentmenu(ev: any) {
        const menu = await this.popoverController.create({
            component: MenuComponent,
            event: ev,
            translucent: false,
            showBackdrop: true
        });
        return await menu.present();
    }

}

左右header内置菜单

Answer 1

我解决了这个问题。问题是 'fullscreen' 离子含量属性。属性导致内容滚动到页眉和页脚后面。这是没有必要的。所以我只需要禁用属性.

<app-header></app-header>
<ion-content delegate-handle="myPageDelegate">

            <ion-card>
                <ion-card-header>
                    <ion-card-subtitle>Subtitle</ion-card-subtitle>
                    <ion-card-title>title</ion-card-title>
                </ion-card-header>
                <ion-card-content>
                    <ion-text>Text</ion-text>
                </ion-card-content>
            </ion-card>

              <ion-item (click)='scrollToElement("brandenburg")'>
                    <ion-label color="primary">Brandenburg</ion-label>
                    <ion-badge slot="start">3</ion-badge>
                </ion-item>   

       <ion-card id='brandenburg'>.... </ion-card> 

    </ion-content>

Ionic 4 [ion-content 和 app-header] 为什么当我滚动到某个元素时 header 会被截断？解决了

Ionic 4 [ion-content and app-header] Why does the header get cut when I scroll to an element? Solved

getelementbyid

scrollview

typescript

ionic-framework

ionic4