这是我的布局(这是一个nativescript-vue应用程序):
<template>
<GridLayout rows="*,auto,*" height="100%">
<StackLayout row="0" />
<ScrollView row="1" orientation="vertical">
<StackLayout>
<slot />
</StackLayout>
</ScrollView>
<StackLayout row="2" />
</GridLayout>
</template>
现在,根据屏幕大小,我的内容要么完全适合页面,在这种情况下,我希望将其垂直放置在其容器(即ScrollView)中,该容器占据顶部栏和导航栏之间的所有空间。因此,在这种情况下,ScrollView中内容的上方和下方将有一些空白。
或者,内容未完全适合ScrollView的边界,在这种情况下,ScrollView中我的内容上方或下方的空白区域应消失,并且内容应自然可滚动。
如果内容合适,这将起作用,否则,它将无法滚动,因为它将ScrollView的高度设置得足够大以包含其内容,因此不会再溢出。
我认为可以解决此问题的是,我为ScrollView设置了max-height,因此其高度不会大于屏幕的高度。
最佳答案
尝试,
<template>
<GridLayout rows="auto,*,auto">
<StackLayout row="0" />
<ScrollView row="1" verticalAlignment="center">
<StackLayout>
<slot />
</StackLayout>
</ScrollView>
<StackLayout row="2" />
</GridLayout>
</template>
我在Playground上进行了测试,它似乎给了我预期的结果。