離子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 - 置頂頭

回答

相關問題