Question

我正在使用framework7构建我的第一个应用程序。现在我卡住了，因为标签的id =＆＃34; tab-1＆＃34;加载页面或刷新页面时未加载。我首先要点击主页＆＃39; -Tab来加载tab-1。 Tab-1具有＆＃34; tab-active＆＃34; Tab-link也有＆＃34; tab-link-active＆＃34;。有人看到这个问题吗？提前谢谢。

<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

一切似乎都很好。您正在使用页面内容选项卡。为每个页面内容选项卡添加margin-top并检查一次。

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

1 个答案: