gpt4 book ai didi

javascript - ion-content 与 ion-header-bar 重叠

转载 作者:IT王子 更新时间:2023-10-29 03:03:08 25 4
gpt4 key购买 nike

我正在基于 ionic 框架构建 phonegap 应用程序。在一个 html 页面中,我需要一个标题和一个内容。但是标题与内容重叠。抱歉,我没有足够的声誉来发布图像。

代码如下。 html 页面与 lib 文件夹位于同一文件夹中,其中包含 ionic 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>

最佳答案

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

将 class="has-header"赋予 ion-content。

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

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

关于javascript - ion-content 与 ion-header-bar 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25408257/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com