auto scroll to de last q-tab



  • I want to auto scroll to de last tab on my application.
    I’m using v-model to set a q-tab selected.
    Any idea?
    <q-tabs :class="preference" v-model="tab"> <q-tab v-for=" __tab in tabs" :ref="__tab.name" :name="__tab.name" :icon="__tab.icon" :route="__tab.route">{{__tab.name}} </q-tab> </q-tabs>

    data () => ({tab: 'tab20' tabs: [{name: 'tab1' ,..... name: 'tab20' ...}]});



  • Hello. You can set a function in a vue-router redirect. so something like

    var routes = [
    {
      path: 'parentRoute',
      component: myComponent,
      children: [
        {
          path: 'tab1'
          component: tabComponent1
        },
        {
          path: 'tab2'
          component: tabComponent2
        },
    ...
        {
          path: 'tab20'
          component: tabComponent20
        },
        {
          path: ''
          redirect: () => {
            // set the route you want
            return 'tab20'
          }
        },
      ]
    }
    ...
    ]
    
    


  • In this case, i’m not using a router. When i select a tab using v-model, with many tabs, the display don’t scroll to it. But I keep trying here



  • Are you saying you use the tabs to scroll on the same page? This is not exactly what tabs are for… Also, 20 tabs on the same page? I would suggest using different pages and vuex if you need a shared state. But I am sure you can get it to work. You need:

    • To set q-tab selected manually
    • To watch for page scrolling and set/unset q-tab selected
    • To scroll to the appropriate parte of the page when a q-tab is clicked using @click

    Good luck


  • Admin

    What version are you on? This issue can’t happen in v0.14.



  • I’m sorry. Probably my problem occour because another problem. This is working now.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.