gpt4 book ai didi

ionic-framework - Ionic has-header 在列表中被忽略

转载 作者:行者123 更新时间:2023-12-01 13:49:58 26 4
gpt4 key购买 nike

我刚开始在一个项目中使用 Ionic 和 Angular。所以这可能是初学者的错误。

所以我制作了一个 html 文件,其中包含标题、选项卡和选项卡内的列表。现在我确实遇到了列表的第一项在标题之后消失的问题。

我正在尝试使用以下代码实现此目的:

<ion-header-bar class="bar-default">
<h1 class="title">Test</h1>
</ion-header-bar>

<ion-tabs class="tabs-default tabs-striped">
<ion-tab title="Rooms">
<ion-content class="scroll-content ionic-scroll has-header">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Another tab"></ion-tab>
<ion-tab title="Another tab"></ion-tab>
</ion-tabs>

这确实给了我一个标题、一个列表和选项卡。但就像我说的,第一个项目在标题之后消失了。

我注意到如果我把 <ion-content><ion-list>..</ion-list></ion-content>在选项卡内容之外,它确实按应有的方式工作。但是根据文档,您可以将内容放在 ion-tab 标签内。

最佳答案

ion-tabs包含一组 ion-tab但是ion-tab指令要求您包含 ion-nav-view在每个选项卡内。

您不会在 documentation 中找到它.

您的 html 将如下所示:

  <body ng-app="app">
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped tabs-top">
<ion-tab title="Rooms">
<ion-nav-view>
<ion-content ng-controller="mainCtrl">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>AAA</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>BBB</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</body>

我用过类 tabs-top对于 ion-tabs指令,但您可以按照自己喜欢的方式更改它。

请注意,我放置了一个 <ion-nav-view>每个内部 <ion-tab> .这是您的内容将由框架加载的地方。

这很棘手,但当您开始使用路线并且每个选项卡内容都从其他 View 加载时,它就会变得很明显。

如果你想看看它是如何工作的,你可以查看 this .

关于ionic-framework - Ionic has-header 在列表中被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32647580/

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