如何在离子内容中滚动到底部答案

【问题标题】：How to scroll to bottom in an ionic-content如何在离子内容中滚动到底部
【发布时间】：2019-03-15 11:56:12
【问题描述】：

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

在我们的一个页面中，离子内容的底部有一个 ul 元素。

当我们通过单击 ul 元素打开列表时，列表打开并且 ion-content 的高度发生了变化，但内容不会向下滚动，所以只要我们不向下滚动，我们就看不到打开的列表'不要手动向下滚动。

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

代码正确获取内容，但 scrollToBottom 没有滚动到底部。

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

页面中的内容是这样定义的：

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

有人知道该怎么做才能让它工作吗？任何帮助将不胜感激。

帕特里克

【问题讨论】：

控制台是否有任何错误？
嗨 Sivaramakrishnan。是的，我在控制台中收到一条错误消息，指出找到的元素的内容未定义。

标签： html css ionic-framework

【解决方案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;

【讨论】：

非常感谢。我会试试的。