首页 文章

离子含量与离子头棒重叠

提问于
浏览 次
46

我正在构建基于离子框架的phonegap应用程序 . 在一个html页面中，我需要一个 Headers 和一个内容 . 但 Headers 与内容重叠 . 对不起，我没有足够的声誉来发布图片 .

代码如下 . html页面与lib文件夹位于同一文件夹中，其中包含离子css和js文件夹 .

<html>
    <head>
    <meta charset="utf-8">
    <title>Weather</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="lib/css/ionic.css">

    <script src="lib/js/ionic.bundle.js"></script>
    <script src="lib/js/angular/angular-resource.js"></script>
    </head>
    <body>
        <ion-header-bar class="bar bar-header bar-dark">
          <h1 class="title">Settings</h1>
          <button class="button button-clear" ng-click="closeSettings()">Close</button>
        </ion-header-bar>
        <ion-content has-header="true">
          <div class="padding">
            <div class="list">
              <label class="item item-input">
                <span class="input-label">Units</span>

                <ion-radio-buttons ng-model="settings.tempUnits">
                  <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
                  <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
                </ion-radio-buttons>
              </label>
            </div>
          </div>
        </ion-content>

    <!-- <ion-pane id="wrapper"> -->
<!--        <ion-header-bar class="bar bar-header bar-dark">
            <button class="button icon-left ion-chevron-left button-clear button-dark" onclick="goBack()">Back</button>
            <div class="title">xxx</div>
            <button class="button button-icon icon ion-navicon"></button>
        </ion-header-bar>
    </body>
</html>
javascript html css cordova ionic-framework

5 回答

  • 86

    见：http://jsbin.com/pagacohovohe/1/edit

    给离子内容一个class =“has-header” .

    <ion-content class="has-header">
</ion-content>

    并且您需要初始化您的角度应用程序 - 请参阅我的示例中的javascript . 注意ng-controller和ng-app .

    回复于
  • 6

    来到这里与Ionic 2有相同的问题：Navbar重叠内容 . 就我而言，这是因为我对离子含量有* ngIf . 解决方案是将* ngIf移动到内部元素，例如ng-container（Thanks @TwitchBronBron）：

    <ion-header>
  <ion-navbar>
    <ion-title>
      ...
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ng-container *ngIf="...">...</ng-container>
</ion-content>
    回复于
  • 12

    您可以尝试像这样设置'has-subheader'类

    <ion-content class='has-header has-subheader'>
    ...
    </ion-content>

    见：http://ionicframework.com/docs/components/#subheader

    回复于
  • 0
    <ion-view view-title="BBS">
    <ion-header-bar class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">web game</a>
            <a class="button">mobile game</a>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">

    </ion-content>
</ion-view>
    回复于
  • 6

    在我的情况下，第一个on有一个* ngIf，其数据基于用户登录后获得的用户角色 . 我最终登录后未显示此项目 . 首次登录后，数据存储在存储中，然后项目显示 .

    回复于

相关问题