时间戳

首页 > 解决方案 > Nativescript Vue：如何更改帧高度以考虑其他内容的空间？

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

问题描述

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

<template>
    <Page actionBarHidden="true">
        <DockLayout height="100%">

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

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

        </DockLayout>
    </Page>
</template>

标签： nativescriptnativescript-vue

解决方案

您可以尝试使用 aGridLayout而不是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>

推荐阅读