Nativescript Vue: Как изменить высоту кадра, чтобы учесть пространство из другого контента? - PullRequest
Новая
       19

Nativescript Vue: Как изменить высоту кадра, чтобы учесть пространство из другого контента?

0 голосов
/ 25 октября 2019

В моем основном 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>

1 Ответ

1 голос
/ 26 октября 2019

Вы можете попробовать использовать 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>
...