Question

我的主要App.vue中有一个名为BottomNavigationBar的组件，该组件始终显示在屏幕上。除此之外，我还有一个单独的Frame，它加载了CountryListComponent，该导航到该组件的不同部分。唯一的问题是，在单独的Frame中加载的某些内容被隐藏在持久性BottomNavigationBar之后。我假设我必须调整新Frame的高度以降低高度以解决BottomNavigationBar的问题。我在@loaded上添加了一个名为adjustFrameHeight的{{1}}事件，但不确定在其中运行什么来调整高度。最好的方法是什么？

Frame

Answer 1

您可以尝试使用GridLayout代替DockLayout。 *将占据屏幕上的可用空间，而auto将占据该行中子组件的最大高度。

<template>
    <Page actionBarHidden="true">
        <GridLayout rows="*, auto" height="100%">

            <Frame row="0" @loaded="adjustFrameHeight" id="main-frame" height="100%" v-show="this.selectedTab =='1'">
                <CountryListComponent @handleItemTap="handleItemTap" :movies="this.movies"/>
            </Frame>

            <BottomNavigationBar 
                        row="1"
                        activeColor="red"
                        inactiveColor="yellow"
                        backgroundColor="blue"
                        @tabSelected="this.changeTab"
                        verticalAlignment="bottom">
                <BottomNavigationTab title="First" icon="icon-29.png" />
                <BottomNavigationTab title="Second" icon="icon-29.png" />
                <BottomNavigationTab title="Third" icon="icon-29.png" />
            </BottomNavigationBar>

        </GridLayout>
    </Page>
</template>

Nativescript Vue：如何更改框架高度以考虑其他内容的空间？

1 个答案: