离子onclick滚动到页面底部不起作用答案

【问题标题】：Ionic onclick scroll to bottom of a page not work离子onclick滚动到页面底部不起作用
【发布时间】：2018-05-25 01:28:17
【问题描述】：

我正在使用 Ionic 3。当用户单击按钮时，它应该向下滚动到页面底部。这是我尝试过的代码：

<div (click)='scrollDown()'>Change User Name</div>


<div>Now you can change your user name <div>

逻辑：

 scrollDown() {
    window.scrollTo(0, 500);
  }

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

像这样工作，

@ViewChild(Content) content: Content;

  scrollToBottom() {
    setTimeout(() => {
      if (this.content.scrollToBottom) {
        this.content.scrollToBottom();
      }
    }, 400);
  }

【讨论】：

【解决方案2】：

您需要获取页面内容的尺寸才能滚动到其底部。以下是点击事件向下滚动的示例。

<div (click)='scrollDown()'>Scroll down</div>

.ts 文件

import {ViewChild} from 'angular2/core';
import {Page,Content} from 'ionic-angular';

@Page({  
  templateUrl: 'page/page.html',
})



export class Page {

    @ViewChild(Content) content: Content;

     constructor() {
     }
     scrollDown(){
        let dimensions = this.content.getContentDimensions();
        this.content.scrollTo(0, dimensions.scrollBottom, 0);
    }
}

【讨论】：

先生，它不适合我。 TypeError: Cannot read property 'getContentDimensions' of undefined 添加@ViewChild(Content) 内容后出现错误：内容；
抱歉，@viewChild 应该在班级内。我已经更新了答案

【解决方案3】：

在类内使用@ViewChild 注释获取内容。然后在超时函数内完全加载视图时对内容使用scrollToBottom() 以避免视图出现故障。示例代码：

export class exPage {
  @ViewChild(Content) content: Content;
  ionViewDidLoad() {
    setTimeout(() => {
      this.content.scrollToBottom(300);
    });
   }
 }

【讨论】：