BAE*_*BAE 46 html javascript css cordova ionic-framework
我正在构建基于离子框架的phonegap应用程序.在一个html页面中,我需要一个标题和一个内容.但标题与内容重叠.对不起,我没有足够的声誉来发布图片.
代码如下.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'">°F</button>
<button class="button button-positive button-radio" ng-value="'c'">°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>
use*_*175 86
见:http://jsbin.com/pagacohovohe/1/edit
给离子内容一个class ="has-header".
<ion-content class="has-header">
</ion-content>
并且您需要初始化您的角度应用程序 - 请参阅我的示例中的javascript.注意ng-controller和ng-app.
cor*_*lla 13
来到这里与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>
您可以尝试像这样设置'has-subheader'类
<ion-content class='has-header has-subheader'>
...
</ion-content>
请参阅:http://ionicframework.com/docs/components/#subheader
小智 6
<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>