NativeScript Vue: как добавить компонент нижней навигации, который будет сохраняться во всем приложении?

Я использую NativeScript Vue и хочу добавить нижнюю панель навигации iOS с 3 значками («Домой», «Учетная запись», «Корзина»). Я бы предпочел посмотреть, смогу ли я сделать это самостоятельно, не добавляя для этого плагин. Заставить компонент панели навигации отобразить в моем приложении. Vue - это просто, но как сделать так, чтобы это сохранялось во всех остальных моих компонентах при изменении файла Vue? Могу ли я определить его в main.js и сделать его глобально доступным компонентом?


nativescript nativescript-vue
person perrymjj    schedule 01.07.2019    source источник
comment
Могу я узнать, почему бы вам не использовать TabView? Вы можете помещать рамки внутри каждой вкладки и перемещаться по ней, TabBar останется внизу во всем приложении. Есть ли какая-то конкретная причина, по которой вы предпочитаете настраиваемую нижнюю панель навигации?   -  person Manoj    schedule 02.07.2019
comment
@Manoj нет реальной причины - я просто хотел посмотреть, будет ли много накладных расходов на создание моего собственного, но это не похоже на то, что оно того стоит. Я выберу TabView. Спасибо :)   -  person perrymjj    schedule 03.07.2019

Ответы (1)


arrow_upward
3
arrow_downward

Если вы не хотите использовать существующий TabView и знаете о плюсах и минусах настраиваемого компонента пользовательского интерфейса, вы можете рассмотреть возможность использования компонента со слотами, который обертывает содержимое вашей страницы.

PageFrame.vue

<template>
    <Page>
        <GridLayout rows="auto * auto">
            <ActionBarComponent row="0" :title="title" />
            <GridLayout row="1">
                <slot />
            </GridLayout>
            <NavBarComponent row="2" :section="section" />
        </GridLayout>
    </Page>
</template>

Home.vue

<template>
    <PageFrame title="Home" section="home">
        <!-- page content -->
    </PageFrame>
</template>

Использование опоры section для выделения текущей страницы на панели навигации.

person TomG    schedule 02.07.2019