First tab is not loading in app (but is loading in web)

Questions
1

Hi

I’ve got this extremely simple test (see app.js / index.html below), and it is working as expected in the Monaca preview. But once I push it to the Monaca debugger App, the first tab is not loaded pr default (it will load once I tab Tab 1.).

app.js

var app = new Framework7({
  root: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  panel: {
    swipe: 'left',
  },
  routes: [
    {
      path: '/',
      url: './index.html',
      tabs: [
        {
          path: '/',
          id: 'tab1',
          content: '<div class="block">Page 1</div>',
        },
        {
          path: '/tab2/',
          id: 'tab2',
          content: '<div class="block">Page 2</div>',
        },
      ]
    },
  ],
});

var mainView = app.views.create('.view-main');

And index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#2196f3">
    <title>My App</title>
    <link rel="stylesheet" href="css/framework7.bundle.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
    <div id="app">
      <div class="view view-main">
        <div class="page">
          <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner sliding">
              <div class="title">Tabs Routable</div>
            </div>
          </div>
          <div class="toolbar toolbar-bottom tabbar">
            <div class="toolbar-inner">
              <a href="/" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
              <a href="/tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
            </div>
          </div>
          <div class="tabs tabs-routable">
            <div class="page-content tab" id="tab1"></div>
            <div class="page-content tab" id="tab2"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="js/framework7.bundle.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
2

Turned out that changing the view initialization from:

var mainView = app.views.create('.view-main');

to

var mainView = app.views.create('.view-main', {
  url: '/'
});

solved the issue

1 Like