在我的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>
此元素的目的是充当终端,并快速打印来自蓝牙设备的传入消息。
目前,只要我将一些文本添加到绑定TextView的terminalText
变量,ScrollView就会滚动回到顶部。我希望能够将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);
}
这将附加文本然后获取scrollableHeight然后将滚动到它。
这是工作场所演示:https://play.nativescript.org/?template=play-ng&id=Rs0xnP&v=16
以下功能只能用于Angular ngDoCheck()或ngAfterContentChecked()生命周期:
// See https://angular.io/guide/lifecycle-hooks
function goDownScrollView(scrollView: object, animate: boolean = true): boolean {
let neScrollView: ScrollView = <ScrollView>getNativeElement(scrollView),
scrollableHeight: number = neScrollView.scrollableHeight;
console.log("neScrollView:", neScrollView);
console.log("neScrollView scrollableHeight:", scrollableHeight);
if (scrollableHeight > 0) {
neScrollView.scrollToVerticalOffset(scrollableHeight, animate);
return true;
} else {
return false;
}
}
始终获取本机元素的帮助器:
function getNativeElement(object: object): object {
return (object.hasOwnProperty("nativeElement")) ? object['nativeElement'] : object;
}
在生命周期的第一次传递中,可滚动高度可能为零(例如,如果使用HTTP请求向ScrollView添加元素)。这就是为什么你必须在滚动前用new测试当前内容的原因:
// See https://angular.io/api/core/ViewChild
@ViewChild("content") private _pageContent: ElementRef<ScrollView>;
public currentContent: object;
private _previousContent: object;
...
ngAfterContentChecked(): void {
if (this.currentContent != this._previousContent) {
let isScrollDown: boolean = goDownScrollView(this._pageContent);
if (isScrollDown) {
this._previousContent = this.currentContent;
}
}
}