Sticky Footer Navigation


#1

I went down a really deep rabbit hole trying to figure out sticky navigation stuff and I think I’ve landed at the best option for a footer navigation is something like this:

Playground Example | Demo Gif

I was hoping to use vue-router but I’m going to go with a more basic routing option where I store the route and params in vuex and then just show/hide the current active template.

I don’t know that it’s an ideal solution but it solves for having a fixes position footer toolbar that doesn’t move between “page” changes and it’s a single vue component for the primary navigation so I can easly break the project into more consumable parts.

Anyone have any thoughts on pros/cons of this structure? Could this cause memory or storage issues?


#2

In essence there is a single Vue page and I’ll include my pages as components and then toggle them on/off based on the route I store in Vuex.


#3

Was this your final solution?


#4

So far this has been pretty close to my final solution. I have both a top and bottom navigation and rather than using the Vue-Router I’m using component view swapping between pages.

I use Vue-Router for login/auth then once the user logs in with facebook I route them to an app.vue file which toggles which pages in the app should be visible.

Though admittedly I have no idea what I’m doing. I have decent Vue experience but I’m new to Nativescript. I started with phonegap but switched to Nativescript.


#5

Thanks for sharing! I’m familiar with Vue but brand new to NativeScript, looking for implementations of recommended practices. Not many at all.


#6

Yeah I feel like Vue integration is still pretty new so welcome to the pioneers of Vue + NativeScript. As I write my app I’ll try to share pieces that others can use them as a reference. This is party why I posted this post in case others have different perspectives on how we should do stuff.


#7

better if you know how to use other components like tabview, much easier and prettier.