javascript - 如何动态改变 ion-content 位置？是否可以？

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 之后，它的位置总是根据 ionic css 文件固定，bar 类总是有 44px 高度。当 ion-content 有类 'has-header has-subheader' 时，在它的 css 中，它只使用 'top:44px;'或 'top:88px;' 硬编码高度。

所以我的实际问题是如何动态调整 ion-content 位置？

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

我看到 ionic 2.0 代码中有一个 resize() 函数可以更新它，但我的代码目前是在 ionic 1.x 中完成的，所以我在这里寻找 1.x 解决方案。

谢谢

Answer 1

受此启发 why don't add separated div? ，我想我只是用一个愚蠢的简单解决方案解决了这个问题。

只需删除模板中的 ion-header-bar，并在 ion-content 中使用 div，因此我避免使用默认 header ，因为它在 ionic 代码中处于固定高度。然后我不必使用任何 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>