NativeScript Vue：如何添加将在整个应用程序中持续存在的底部导航组件？

Question

我正在使用 NativeScript Vue，我想添加一个 iOS 带有 3 个图标（主页、帐户、购物车）的底部导航栏。我宁愿看看我是否可以在不为其添加插件的情况下自行完成此操作。让导航栏组件显示在我的 App.vue 上很简单，但是当 Vue 文件更改时，我如何让它在我的其余组件中持续存在？我会在 main.js 中定义它并使它成为一个全局可访问的组件吗？

Answer 1

如果您不想使用现有的 TabView 并且了解自定义 UI 组件的优缺点，您可以考虑使用封装页面内容的开槽组件。

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 属性在导航栏中突出显示当前页面。

NativeScript Vue：如何添加将在整个应用程序中持续存在的底部导航组件？

NativeScript Vue: How to add a bottom navigation component that will persist throughout app?

nativescript

nativescript-vue