Question

enter image description here

我需要创建一个如上所述的页面。图像放置在两个分区的顶部。或在工具栏和内容之间，我想放置一张图片，如上面的图片。我在ionic论坛上找不到任何文档。如果有人在ionic 3中创建了这样的页面，请共享您的代码。谢谢

Answer 1

您可以通过遵循此tutorial并进行一些修改来实现

首先，在您的终端中生成一个组件

ionic g component expandable-header

然后将其导入app.module

编辑您的expandable-header.ts

import { Component, Input, OnInit, ElementRef, Renderer } from '@angular/core';

@Component({
    selector: 'expandable-header',
    templateUrl: 'expandable-header.html'
})

export class ExpandableHeaderComponent {

    @Input('scrollArea') scrollArea: any;
    @Input('headerHeight') headerHeight: number;
    newHeaderHeight: any;

    constructor(public element: ElementRef, public renderer: Renderer) {
    }

    ngOnInit(){

        this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');

        this.scrollArea.ionScroll.subscribe((ev) => {
      this.resizeHeader(ev);
        });
    }

    resizeHeader(ev){

        ev.domWrite(() => {

            this.newHeaderHeight = this.headerHeight - ev.scrollTop;

            if(this.newHeaderHeight < 0){
                this.newHeaderHeight = 0;
            }  

            this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px');

            for(let headerElement of this.element.nativeElement.children){

            let totalHeight = headerElement.offsetTop + headerElement.clientHeight;

            if(totalHeight > this.newHeaderHeight && !headerElement.isHidden){
                headerElement.isHidden = true;
            } else if (totalHeight <= this.newHeaderHeight && headerElement.isHidden) {
                headerElement.isHidden = false;
            }
        }

     });

   }
}

编辑您的expandable-header.html

<ng-content></ng-content>

编辑您的expandable-header.scss

expandable-header {
    display: block;
    background-color: map-get($colors, primary);
    min-height: 40px;
}

在您要执行此操作的页面中，在html

<ion-header>
    <expandable-header [scrollArea]="myContent" headerHeight="150">
        <img src="https://avatars.io/instagram/pathmoretravelled" />
        <!-- sample image -->
    </expandable-header>
</ion-header>

<ion-content fullscreen #myContent>
    <!-- your code here --> 
</ion-content>

在.scss

中

expandable-header {
    background-color: #363636;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;

    img {
        position: absolute;
        bottom: -40px;
        border-radius: 50%;
        width: 75px;
        height: auto;
        margin-right: 15px;
    }
}

Answer 2

尝试这种依赖性ion-collapse-header

如何在Ionic 3中创建折叠工具栏

2 个答案: