离子2 - 置顶头

我需要在我的应用程序，其保持当前块的值来创建一个粘性标题。离子2 - 置顶头

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

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 
    @ViewChild(Content) 
    content:Content; 

    ngAfterViewInit() { 
    // I want to trigger the listener during the scroll event 
    this.content.ionScroll.subscribe((data)=>{ 
     this.onPageScroll(data); 
    }); 
    } 

    onPageScroll(data) { 
    console.log("top:", data['scrollTop']) 
    } 

    : 
    :

为了确定在粘头要显示的元素，我在各端框隐藏的元件：

<div class="titleTag" style="display:none">{{event.title}}</div>

我使用此代码检索滚动位置

当我尝试检索这些元素的位置：

let titleTags = document.getElementsByClassName('titleTag'); 
for (let el of <any>titleTags) { 
    console.log(" > offsetTop", el.offsetTop); 
}

我得到0 。

我也offsetHeight和scrollTop尝试，都返回0为好。

任何想法？

来源

2017-04-03 guyaloni

您是否尝试过''？ https://ionicframework.com/docs/api/components/toolbar/Header/ – Chris

我有一个''元素，它实际上有粘性标题占位符，但问题是我不设法获得下元素来显示！ – guyaloni

为sticky ion-list-header创建一个小指令：https：//github.com/jonaszuberbuehler/ion-affix。你需要这样吗？ – z00bs

为了直接得到元素离子2 /角2使用ElementRef。

import {ElementRef} from '@angular/core'; 


//class.. 
constructor(public el:ElementRef){} 

//in your function... 
let titleTags =this.el.nativeElement.getElementsByClassName('titleTag'); 
for (let el of <any>titleTags) { 
    console.log(" > offsetTop", el.offsetTop); 
}

来源

2017-04-03 10:37:23

遗憾的是它没有为我的作品...我得到0。顺便说一句，当我检查（调试）'el.'__proto__我得到：'HTMLDivElement {符号（Symbol.toStringTag）： “HTMLDivElement”}'。我也检查了所有祖先的'offsetTop'，他们都得到了相同的结果 - 零！ – guyaloni

离子2 - 置顶头

回答

相关问题