自动滚动到底部答案

【问题标题】：Auto scroll to Bottom自动滚动到底部
【发布时间】：2016-11-13 06:51:12
【问题描述】：

我正在开发带有聊天屏幕的应用程序。但作为普通屏幕，它开始从上到下滚动。但它应该是从下到上。该应用程序位于 Telerik Nativescript 平台。

View.xml

<ScrollView row="0" col="0">  
    <StackLayout class="history-content-area">
        <Repeater items="{{messageHistory}}">
            <Repeater.itemTemplate>
                <StackLayout>
                    <!-- ITEMS GO HERE -->
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

我在上面的代码中需要帮助，如何在页面加载时自动滚动到底部？如果您需要 javascript 代码，请告诉我。

提前致谢。

【问题讨论】：

标签： javascript xml telerik hybrid-mobile-app nativescript

【解决方案1】：

在您的 ScrollView 上，您可以使用 scrollToVerticalOffset，您可以在其中传递要滚动到的偏移量。

例如： view.xml

<ScrollView row="0" col="0" id="myScroller">  
    <StackLayout class="history-content-area">
        <Repeater items="{{messageHistory}}">
            <Repeater.itemTemplate>
                <StackLayout>
                    <!-- ITEMS GO HERE -->
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

view.js

mScroller = page.getViewById("myScroller");

var offset = mScroller.scrollableHeight; // get the current scroll height
mScroller.scrollToVerticalOffset(offset, false); // scroll to the bottom

【讨论】：

嘿@Nick lliev，我在offset 中得到偏移，但它不滚动。是否有可能我们需要添加超时？
您可以尝试类似 setTimeout(scrollToBottomFunc, 10) ;... 此外，您可能应该考虑删除/更改您的 Stack 布局（因为这是一个没有预定义大小的布局）到网格布局或类似的。
嘿@NickIliev 我正在尝试在视图中间自动滚动，但是当我获得verticalOffset 时，值为0，有没有办法设置一个值？我在文档中找不到任何内容，因为该属性允许获取值但不能设置它.... :-( 如果有人可以帮助我，如何在视图中间自动滚动会很棒！ !
@kansen，我遇到了同样的问题。将其包装在 1 秒超时中。您将获得正确的页面高度。这是示例代码 var self = this; setTimeout(function() { var offset = self.scrollerElem.nativeElement.scrollableHeight; self.scrollerElem.nativeElement.scrollToVerticalOffset(offset, false); }, 1000);

【解决方案2】：

假设您的 ScrollView 的 id 为“id-scroller”。然后在你的 View.js 你做：

let scroller = page.getViewById('id-scroller');

setTimeout(function() {
  scroller.scrollToVerticalOffset(scroller.scrollableHeight, true);
}, 1);

【讨论】：