Nativescript 以编程方式滚动到 ScrollView 的底部

2023-12-03

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

<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>

该元素的目的是充当终端,并快速打印来自蓝牙设备的传入消息。

目前,每当我向滚动视图添加一些文本时,滚动视图就会滚动回顶部terminalTextTextView 绑定到的变量。我希望能够将 ScrollView 保留在 TextView 的底部。


一些注意事项:

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

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

我尝试实现以下代码,该代码将在 ScrollView 加载后执行:

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);
    }
}

(此尝试基于给出的解释here

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


你正在设置TextView固定高度 100%,这将与ScrollView因此scrollableHeight永远是 0。你应该使用minHeight="100%".

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

像这样

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

    },150);
}

这将附加文本,然后获取可滚动高度,然后滚动到它。

这是工作游乐场演示:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nativescript 以编程方式滚动到 ScrollView 的底部 的相关文章

随机推荐