framework7在加载时未显示选项卡1

Question

I am building my first app with framework7. Now I'm stuck because the tab with id="tab-1" is not loading, when the page is loaded or when refreshing page. I first have to tap on 'Home'-Tab to load tab-1. Tab-1 has "tab-active" an the Tab-link has also "tab-link-active". Anyone seeing the problem? Thanks in advance.

<div class="statusbar-overlay"></div>

<div class="panel-overlay"></div>

<div class="panel panel-left panel-reveal">
    <div class="content-block">
        <p>Left panel content goes here</p>
    </div>
</div>

<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link icon-only open-panel"><i class="f7-icons ios-only">bars</i></a>
                </div>
                <div class="center sliding">App Title</div>
            </div>
        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar tabbar-labels tabbar">
          <div class="toolbar-inner">
            <a href="#tab-1" class="tab-link tab-link-active">
              <i class="f7-icons ios-only">home</i>
              <span class="tabbar-label">Home</span>
            </a>
            <a href="#tab-2" class="tab-link">
              <i class="f7-icons ios-only">bell</i>
              <span class="tabbar-label">Alerts</span>
            </a>
            <a href="#tab-3" class="tab-link">
              <i class="f7-icons ios-only">today</i>
              <span class="tabbar-label">Calendar</span>
            </a>
            <a href="#tab-4" class="tab-link">
              <i class="f7-icons ios-only">paper_plane</i>
              <span class="tabbar-label">News</span>
            </a>
          </div>
        </div>

        <div class="pages navbar-fixed">
          <div data-name="home" class="page">
              <div class="tabs">
                <div class="page-content tab tab-active" id="tab-1">
                  <div class="block">
                   <span><b>Home</b></span>
                    <p>...</p>
                  </div>
                </div>
                <div class="page-content tab" id="tab-2">
                  <div class="block">
                    <span><b>Alerts</b></span>
                    <p>...</p>
                  </div>
                </div>
                <div class="page-content tab" id="tab-3">
                  <div class="block">
                    <span><b>Calendar</b></span>
                    <p>...</p>
                  </div>
                </div>
                <div class="page-content tab" id="tab-4">
                  <div class="block">
                    <span><b>News</b></span>
                    <p>...</p>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
</div>



<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>

Answer 1

Everything seems fine. You are using page-content tab. Add a margin-top for each page-content tab and check once.