Blinking tab bar



  • Hello,

    I made a tab bar for the bottom of one of my app’s layouts. Here’s the code:

    <template>
      <q-layout>
        <q-page-container>
          <q-layout-header>
            <q-toolbar color="tertiary">
            </q-toolbar>
          </q-layout-header>
          <transition name="fade">
          <router-view />
          </transition>
          <q-layout-footer>
            <q-tabs color = "tertiary">
              <q-route-tab to = "../rides/" default slot="title" name="tab-1" icon="home" />
              <q-route-tab to = "../profile/" slot="title" icon="person" />
              <q-route-tab to = "../settings/" slot="title" icon="settings" />
              <q-route-tab to = "../create/" slot="title" icon="library_add" />
            </q-tabs>
          </q-layout-footer>
        </q-page-container>
      </q-layout>
    </template>
    

    Though a tab bar does appear at the bottom of the app and I can successfully navigate to and from four pages of my app, whenever I select a tab the entire tab bar will “blink” by disappearing and reappearing very fast. If I could get more information on why this happens, that would be very helpful.

    If I’m leaving out any important information, let me know
    Thanks



  • <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
    <template>
      <q-layout>
        <q-page-container>
          <q-layout-header>
            <q-toolbar color="tertiary">
            </q-toolbar>
          </q-layout-header>
          <transition name="fade">
          <router-view />
          </transition>
            <q-tabs position = "bottom" color = "tertiary">
              <q-route-tab to = "../rides/" default slot="title" name="tab-1" icon="home" />
              <q-route-tab to = "../profile/" slot="title" icon="person" />
              <q-route-tab to = "../settings/" slot="title" icon="settings" />
              <q-route-tab to = "../create/" slot="title" icon="library_add" />
            </q-tabs>
        </q-page-container>
      </q-layout>
    </template>
    

    Here’s an alternative I tried, where instead of placing the tabs at the bottom of the app using the <q-layout-footer> tag I added a position = “bottom” property to the <q-tabs> tag. It seems to get rid of the blinking issue, but now I have to scroll down to be able to see the tabs.


  • Admin

    @Jams I suggest you re-read the Layout section (with all its pages) in docs. Also look at the source code for Play examples. You’ve missed a couple of important things, like the “view” QLayout prop. Also, placing QPageContainer right under the QLayout works, but it’s not quite efficient (in your specific case). I recommend wrapping only <transition> with its <router-view>.