在离子含量离子2的顶部添加固定离子行
在离子含量离子2的顶部添加固定离子行
提问于 2017-01-31 00:09:24
在ion中，我们可以在ion-header中添加ion-navbar和ion-toolbar，但我想在ion-content顶部添加一些自定义菜单栏到我的应用程序中，因为我添加了ion行，并添加了z-index和位置CSS，以便它在浏览器中工作，但当它构建菜单栏时，改变位置时，它不会固定在顶部。我猜我固定位置后，用户不能滚动离子内容时，滚动菜单的位置发生了变化。如何将自定义菜单栏添加到ion-content的顶部
此图像以灰色显示菜单栏
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row style="position: fixed;height: 50px;background: #444444">
<button ion-button small>test btn</button>
</ion-row>
<ion-row *ngFor="let item of data" style="background: #eee;border: 1px solid #888;height: 40px">
{{item.name}} - {{item.id}}
</ion-row>
</ion-grid>
</ion-content>回答 2
Stack Overflow用户
发布于 2017-01-31 17:39:44
您可以在ion-content标记内添加一个ion-toolbar，就像在标题中一样，它的工作方式也是一样的，您只需要向工具栏添加一个position:fixed
<ion-toolbar style="position:fixed;">
<ion-buttons start>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-title>Send To...</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="person-add"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>Stack Overflow用户
发布于 2017-01-31 14:58:39
我认为你需要这个：
<ion-header>
<ion-navbar>
<ion-title>title</ion-title>
</ion-navbar>
<ion-grid style="position: fixed; height: 50px; background: #444444">
<ion-row>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
<ion-content style="top: 50px;">
</ion-content>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41940447
复制相关文章
相似问题
腾讯云开发者
