Question

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

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


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

逻辑：

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

Answer 1

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

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);
    }
}

.ts文件

{{1}}

Answer 2

像这样工作，

@ViewChild(Content) content: Content;

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

Answer 3

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

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

`

Ionic onclick滚动到页面底部不起作用

3 个答案: