TabBar container and loading page events

I have a main page that is a TabBar container. The links in the tab container load separate elements. I can not get any type of onload event handler to fire when the tab container loads the page. I am currently handling this by adding a v-on:click, but that means all of the initialization has to be in the tab container instead of in the mounted or like a pageBeforeIn method.
Should the pages that get loaded into a tab bar not be pages?

1 Like

This is the template that is being loaded into the tab container:

    <template>
      <f7-page>
        <f7-block-title> </f7-block-title>
        <f7-list form>
          <f7-list-item>
            <f7-input type="text" placeholder="First Name"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-input type="text" placeholder="Last Name"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-input type="email" placeholder="E-mail"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-input type="tel" placeholder="Phone"></f7-input>
          </f7-list-item>
        </f7-list>
      </f7-page>
    </template>

    <script>

    export default {
      name: 'Account',
      },
      methods: {
        intialized() {
          console.log('initialized')
        }
      },
      on: { // these are the framework7 lifecycle hooks, none of them get called.
        pageInit (event, pageData) {
          console.log('pageInit')
        },
        pageMounted (event, pageData) {
          console.log('pageMounted')
        },
        pageReinit (event, pageData) {
          console.log('pageReinit')
        },
        pageBeforeIn (event, pageData) {
          console.log('pageBeforeIn')
        },
        pageAfterIn (event, pageData) {
          console.log('pageAfterIn')
        },
        pageBeforeOut (event, pageData) {
          console.log('pageBeforeOut')
        },
        pageAfterOut (event, pageData) {
          console.log('pageAfterOut')
        },
      },
      beforeCreate() {
        console.log('beforeCreate account')
      },
      created() {
        console.log('beforeDestroy account')
      },
      beforeMount() {
        console.log('beforeMount account')
      },
      mounted() {
        console.log('mounted account')
      },
      beforeUpdate() {
        console.log('beforeUpdate account')
      },
      updated() {
        console.log('updated account')
      },
      beforeDestroy() {
        console.log('beforeDestroy account')
      },
      destroyed() {
        console.log('destroyed account')
      },

    }
    </script>

Hi, you are using vue, so you need to add listen to vue events.
if you want to listen to f7 events, try binding them on created or mounted. (both vue events). But i use f7-vue, and initialize your page on vue mounted works fine.

eg (pseudocode):

 export default {
    name: 'Account',
    mounted () {
        this.$f7.on('yourEventToListen', this.initialize)
    }
    methods: {
      intialized() {
        console.log('initialized')
      }
    },\
}

Would be also good to see how do you load that component?

As you can see from the code I’ve posted, I have coded for all of the framework7 on: [pageEvents] and also all of the vue component lifecycle events. When I load the app, I get the following lifecycle events:

beforeCreate account
beforeDestroy account
beforeMount account
mounted account

But none of the framework7 events, and none of the vue events happen when the tab actually comes into view… when it’s activated.
I’m using a tab-link to load the page. It is a tab container and then each page has a navigation controller. This is pretty much copied from the phonegap/framwork7/webpack starter template.

<template>
<div id="tabs">
    <!-- Left Panel -->
    <f7-page tabbar-fixed with-subnavbar>
        <!-- iOS TabBar has icons, Material TabBar does not -->
        <f7-toolbar tabbar swipeable :labels="isiOS">
            <f7-link :icon-f7="isiOS ? 'home' : ''" text="Home" tab-link="#home" active> </f7-link>
            <f7-link :icon-f7="isiOS ? 'persons' : ''" text="Contacts" tab-link="#contacts"> </f7-link>
            <f7-link :icon-f7="isiOS ? 'bell' : ''" text="Alerts" tab-link="#alerts" ></f7-link>
            <f7-link :icon-f7="isiOS ? 'settings' : ''" text="Account" tab-link="#account"></f7-link>
        </f7-toolbar>

        <f7-tabs>
            <f7-tab id="home" tab-active>
                <events-page />
            </f7-tab>
            <f7-tab id="contacts">
                <contacts-page />
            </f7-tab>
            <f7-tab id="alerts">
                <alerts-page />
            </f7-tab>
            <f7-tab id="account">
                <account-page />    
            </f7-tab>
        </f7-tabs>

    </f7-page>
</div>
</template>

The basic idea of what I am trying to do is this: A tab container with each tab page having its own navigation controller. I have also tried adding routable tabs, but when I try to load the route with the routable tabs, I get sent to the NotFoundPage. It will load it if I comment out the tabs item, but of course, then I don’t have any routeable tabs.
Here are my routes for routable tabs:

export default [
  {
    path: '/',
    component: SplashScreen,
    animate: false
  },
  {
    path: '/login/',
    component: LoginScreen,
    reloadCurrent: true,
    animate: false
  },
  {
    path: '/home/',
    component: Home,
    reloadCurrent: true,
    animate: false,
    tabs: [
      {
        path: '/events/',
        id: 'events',
        component: Events
      },
      {
        path: '/contacts/',
        id: 'contacts',
        component: Contacts
      },
      {
        path: '/alerts/',
        id: 'alerts',
        component: Alerts
      },
      {
        path: '/account/',
        id: 'account',
        component: Account
      },
    ]
  },
  {
    path: '/left-menu/',
    component: LeftMenu
  },
  {
    path: '(.*)',
    component: NotFoundPage
  }
]

Well, this is a bit wrong, and i see it is wrong in phonegap template:

  • nested pages are not really supported (page in page)
  • routable tabs must load components other than page, because page itself must contain routable tabs
  • routable Views/Pages are not supported

So that is the reason why page events don’t work for you, because you try to load them as tabs rather than pages.

You better to check official Tabs Template https://github.com/framework7io/framework7-template-tabs/blob/master/www/index.html It is not Vue, but you must get the idea of how to structure the app and routes correctly

Hi @geetaristo

I struggled with similar questions, so I build this f7 vue template.

For Tabs in vue, see

1 Like

i cant use on:{pageInit(event, page) {}} in any vue module,Are there any conditions when using?

Because it is for old F7 v2. You need

<template>
  <f7-page @page:init="onPageInit">...</f7-page>
</template>
<script>
  export default {
    methods: {
      onPageInit(e, page) { /* do something here */ }
    },
  }
</script>