I am using NativeScript Vue and I want to add an iOS bottom nav bar with 3 icons (Home, Account, Cart). I'd rather see if I can do this on my own without adding a plugin for it. Getting a nav bar component to show up is on my App.vue is simple but how do I have this persist throughout the rest of my components when the Vue file changes?
Would I define it in the main.js and make it a globally accessible component?
-
May I know why don't you go with TabView? You may put frames inside each tab and navigate within that, the TabBar would stay at bottom through out app. Is there any specific reason you prefer a custom bottom navigation bar?Manoj– Manoj2019-07-02 05:50:59 +00:00Commented Jul 2, 2019 at 5:50
-
@Manoj there is no real reason -- I just wanted to see if there'd be a lot of overhead building my own but it doesn't sound like it's worth the trouble. I will go with TabView. Thanks :)perrymjj– perrymjj2019-07-02 23:09:39 +00:00Commented Jul 2, 2019 at 23:09
Add a comment
|
1 Answer
If you don't want to use the existing TabView and are aware of the pros and cons of a custom UI component, you could consider using a slotted component that wraps your page content.
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>
Using the section prop to highlight the current page in the nav bar.
