带有 Nativescript 的滚动视图中的多个全屏

Posted 2023-04-13

【中文标题】带有 Nativescript 的滚动视图中的多个全屏

【英文标题】：Multiple fullscreen in scrollview with Nativescript

【发布时间】：2020-08-15 11:21:10

【问题描述】：

我想知道如何使用 nativescript 在滚动视图中实现多个全屏？

我试过这个：

<Page actionBarHidden="true" class="page">
    <ScrollView orientation="vertical">
        <StackLayout>
            <StackLayout  backgroundColor="red">
<Label text="Fullscreen 1"></Label>
            </StackLayout>

            <StackLayout  backgroundColor="blue">
<Label text="Fullscreen 2"></Label>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</Page>

但堆栈不是全屏的。

【参考方案1】：

我解决了这个问题：

模板

<Page actionBarHidden="true">
    <ScrollView orientation="vertical">
        <StackLayout>
            <StackLayout : backgroundColor="red">
                ...
            </StackLayout>

            <StackLayout : backgroundColor="blue">
                ...
            </StackLayout>
        </StackLayout>
    </ScrollView>
</Page>

并添加：

import  screen  from "tns-core-modules/platform";

...
data() 
    return 
        screenHeight: 0
    ;
,
...
created() 
    this.screenHeight = screen.mainScreen.heightDIPs