[英]Cannot read property `contentHeight` of Undefined in Ionic 2
I need to get the scrollTop position in my Ionic 2 page, but it is just not working using simple jQuery. 我需要在Ionic 2页面上获得scrollTop位置,但是使用简单的jQuery却无法正常工作。
Checkout my working example below, scroll the page and click on it, it will give you the y
position number. 在下面查看我的工作示例,滚动页面并单击它,它将为您提供
y
位置编号。
$("body").click(function(){ var scrollPost = $(document).scrollTop(); alert(scrollPost); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/> test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/> <div class="test">Thats a test</div>
But jQuery method to get scrollTop does not work, it always return 0. 但是获取scrollTop的jQuery方法不起作用,它总是返回0。
So I have planned to get it using the ionic way, documentation here 所以我计划使用离子方式来获得它, 这里的文档
I am trying to use dimensions.contentHeight , dimensions.contentTop , but getting error. 我正在尝试使用Dimensions.contentHeight , Dimensions.contentTop ,但是出现错误。 Below is my code.
下面是我的代码。
home.html
code: home.html
代码:
<ion-content content>
<div #topScroll>
The world is your oyster.
test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>
test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>test<br/><br/><br/><br/>kjh<br/>kjgh<br/>uitz<br/><br/><br/><br/>uztjhg<br/>kjh<br/>
<div class="test">Thats a test</div>
</div>
</ion-content>
home.ts
code updated home.ts
代码已更新
home.ts
code: home.ts
代码:
import { Content } from 'ionic-angular';
import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AfterViewInit,Renderer2, ElementRef } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit {
@ViewChild(Content) content: Content;
constructor(private renderer: Renderer2, public navCtrl: NavController) {
}
ngAfterViewInit() {
// Renderer2 used not Renderer, inject it before using
this.renderer.listen('document', 'click', (e) => {
// Get contentHeight here
var iscroll = this.content.contentHeight;
// error - Property 'dimensions' does not exist on type 'Content'
var iscroll2 = this. content.dimensions.contentHeight;
alert(iscroll);
alert(iscroll2);
});
}
Error coming - cannot read property
contentHeight
of Undefined.出现错误-无法读取未定义的属性
contentHeight
。
What am I doing wrong? 我究竟做错了什么?
You have multiple issues here: 您在这里遇到多个问题:
content
and not #content
in the template content
而不是模板中的#content
I'd do: 我会做:
<ion-content #content><!-- omitted content --></ion-content>
// Make sure to import AfterViewInit and implement it
ngAfterViewInit() {
// Renderer2 used not Renderer, inject it before using
this.renderer.listen('document', 'click', (e) => {
// Get contentHeight here
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.