Nativescript以编程方式滚动到ScrollView的底部 [英] Nativescript scroll to bottom of ScrollView programmatically

问题描述

在我的Nativescript Angular应用程序中，我在ScrollView中有一个TextView，其定义如下:

In my Nativescript Angular application, I have a TextView within a ScrollView, defined as such:

<ScrollView orientation="vertical" height="70%" width="100%" style="margin-bottom: 1%; background-color:white" (loaded)="onScrollerLoaded($event)">
    <TextView 
        id="terminal" [text]="terminalText" editable="false"
        style="color: whitesmoke; background-color: black; font-size: 8%; font-family: monospace" height="100%"     
        (tap)="onTap($event)" (loaded)="onTerminalLoaded($event)">
    </TextView>
</ScrollView>

此元素的作用是充当终端，并快速打印来自蓝牙设备的传入消息.

The purpose of this element is to act as a terminal, and is rapidly printing incoming messages from a bluetooth device.

当前，每当我向TextView绑定到的terminalText变量中添加一些文本时，ScrollView就会滚动回到顶部. 我希望能够将ScrollView保留在TextView的底部.

Currently, the ScrollView is scrolling back to the top whenever I add some text to the terminalText variable, to which the TextView is bound. I would like to be able to keep the ScrollView at the bottom of the TextView.

一些注意事项:

我正在通过此方法在关联的组件类中的terminalText变量中添加文本:

I am adding text to the terminalText variable within my associated component class through this method:

public appendToTerminal(appendStr){
    this.terminalText += appendStr;
}

我尝试实现以下代码，这些代码将在ScrollView加载后执行:

I have tried implementing the following code that would execute once the ScrollView loads:

private scrollIntervalId;
onScrollerLoaded(data: EventData){
    if(!this.scrollIntervalId){
        this.scrollIntervalId = setInterval(()=>{
            this.ngZone.run(() =>
                (data.object as any).scrollToVerticalOffset((data.object as any).scrollableHeight, false)
            )
        }, 10);
    }
}

(此尝试基于此处

我只能在Android设备上尝试过此操作，因为我无法访问Apple设备.

I have only tried this on an Android device, as I do not have access to an Apple device.

推荐答案

您要将TextView设置为固定高度100％，该高度与ScrollView相同，这就是为什么scrollableHeight始终为0的原因.使用minHeight="100%".

you are setting TextView to fixed height 100% which is will be same as ScrollView that is why scrollableHeight will always be 0. you should use minHeight="100%".

然后，当您将文本追加到终端文本this.terminalText += appendStr时，可以通过编程方式滚动到末尾.

then you can scroll programmatically to the end when you are appending text to terminal text this.terminalText += appendStr.

像这样

public appendToTerminal(appendStr){
    this.terminalText += appendStr;
    setTimeout(()=>{
        scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, false);

    },150);
}

这将附加文本，然后获取scrollableHeight，然后滚动至该文本.

this will append the text then get the scrollableHeight and then will scroll to it.

这是工作场演示: https://play .nativescript.org/?template = play-ng& id = Rs0xnP& v = 16

这篇关于Nativescript以编程方式滚动到ScrollView的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！