Question

我需要在我的应用中创建一个粘性标题，其中包含当前块的值。

我使用以下代码检索滚动位置：

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。

任何想法??

Answer 1

为了直接获取Ionic 2 / Angular 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);
}

离子2 - 粘性标题

1 个答案: