Question

我们正在使用Ionic v1.3.1。开发iPad的移动应用程序。

在我们的其中一页中，离子含量的底部有一个ul元素。

当我们通过单击ul元素打开列表时，列表会打开，并且离子含量的高度会发生变化，但是含量不会向下滚动，因此只要我们不打开，就看不到打开的列表不要手动向下滚动。

我们尝试通过以下代码向下滚动到内容的底部。

代码可以正确获取内容，但scrollToBottom不会滚动到底部。

var element = document.getElementById("myContent");
if (element){
    element.content.scrollToBottom();
}

内容在页面中的定义如下：

<ion-content id="myContent" class="padding has-header" scroll="true" style="overflow: scroll;">

有人知道如何使它正常工作吗？任何帮助将不胜感激。

帕特里克

Answer 1

ES2015 / ES6样式ScrollToBottom

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

@Page({  
  templateUrl: 'build/pages/page1/page1.html',
  queries: {
      content: new ViewChild(Content)
  }
})
export class Page1 {
     constructor() {
     }
     scrollToBottom(){
        let dimensions = this.content.getContentDimensions();
        this.content.scrollTo(0, dimensions.scrollBottom, 0);
    }
}

您可能需要添加：

@ViewChild(Content) content: Content;

如何滚动到离子含量的底部

1 个答案: