时间戳

首页 > 解决方案 > 如何在离子内容中滚动到底部

html - 如何在离子内容中滚动到底部

问题描述

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

在我们的一个页面中，在 ion-content 的底部有一个 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;">

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

帕特里克

标签： htmlcssionic-framework

解决方案

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;

推荐阅读