Question

我遇到了问题，首先看结构

<ion-view>
    <ion-header-bar class="bar-subheader">
    </ion-header-bar>

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

    <ion-footer-bar>
    </ion-footer-bar>
</ion-view>

我会将动态文本长度放在ion-header-bar中，因此它可以显示为某个更宽的设备显示一行，其他一些设备可以是多行。我的问题是ion-content之后，它的位置总是根据离子css文件固定，条形类总是有44px高度。如果ion-content有类'has-header has-subheader'，则在其css中，它只使用'top:44px;'或'top:88px;'硬编码高度。

所以我的实际问题是如何动态调整离子含量位置？

我尝试使用ng-style和document.querySelector来获取我的子标题的当前高度，但是这个值不是实时绑定的，当标题因为太多文本扩展到多行而扩展时，Angular控制器中的document.querySelector未正确更新。

我已经看到离子2.0代码中有一个resize（）函数可以更新它，但我的代码目前在离子1.x中完成，所以我在这里寻找一个1.x解决方案。

谢谢

Answer 1

受到这个why don't add separated div?的启发，我想我只是用一个简单的简单决议来解决它。

只需删除模板中的ion-header-bar，并在离子内容中使用div，因此我避免使用默认标头，因为它在离子代码中处于固定高度。然后我不必使用任何DOM查询，所有div都很乐意安排。只有一个问题，ion-nav-bar高度仍然是固定的，但可以通过sass进行调整。

<ion-content class="has-header  has-footer">
    <div class="myheader>
    </div>
   <div class="other-stuff">
   </div>
</ion-content>

<ion-footer-bar>
</ion-footer-bar>

如何动态改变离子含量位置？有可能吗？

1 个答案: