修复了带有可滚动列表视图离子的顶部内容

Question

这是我的代码

<ion-view title="'Ask'">

  <ion-content has-header="true" >

    <!-- Top Content -->
    <div class="item item-input-inset">
  <label class="item-input-wrapper">
    <input type="text" align="center" ng-model="newmsg" placeholder="Title">
  </label>
  <button class="button button-small  button-button-outline button-balanced"
          ng-click="insert(newmsg)">Add</button>


</div>

  <div class="item item-input-inset">
  <ti-segmented-control on-select="tapChanged($index)"style="width: 100%;">
    <ti-segmented-control-button class="button-balanced" title="'title 1'" selected> </ti-segmented-control-button>
    <ti-segmented-control-button class="button-balanced" title="'title 2'"></ti-segmented-control-button>
  </ti-segmented-control>
</div>    

 <!-- list view -->

  <ion-list>
   <ion-item ng-repeat="item in items">
   {{item.name}}!
     </ion-item>
   </ion-list>

  </ion-content>

</ion-view>

在上方滚动整个页面。

然后我尝试了，scroll="false" 在 ion-content 标记中，<ion-scroll direction="y"></ion-scroll> 在 ion-list 中，但滚动视图没有滚动到列表项的底部。

任何人有解决这个问题的想法吗？

提前致谢。

编辑

plunker（感谢 LeftyX 提供可运行代码）

Answer 1

如果您想要具有不同高度的标题和子标题（如您的情况），最好的选择是使用sass 并自定义变量。

您可以从应用程序的目录运行：

ionic setup sass

ionic 将创建 scss 文件和相关联的 gulp 任务。

如你所见here副标题的高度

$bar-subheader-height: $bar-height !default;

等于header的高度：44px：

$bar-height: 44px !default;

您可以更改$bar-subheader-height 的值，在ionic.app.scss 文件（文件夹scss）中添加一行：

$bar-subheader-height: 150px;

gulp 任务将编译到修改后的css 文件中。

另一种选择是重新定义 css 规则。正如您在plunker 中看到的那样

我有标题和子标题（使用相同的指令ion-header-bar）：

  <ion-view>

    <ion-header-bar class="bar-stable">
      <h1 class="title">Awesome App</h1>
    </ion-header-bar>

    <ion-header-bar class="bar bar-subheader">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" align="center" ng-model="newmsg" placeholder="Title">
        </label>
        <button class="button button-small  button-button-outline button-balanced" ng-click="insert(newmsg)">Add</button>
      </div>

      <div class="item item-input-inset">
        <ti-segmented-control on-select="tapChanged($index)" style="width: 100%;">
          <ti-segmented-control-button class="button-balanced" title="'title 1'" selected> </ti-segmented-control-button>
          <ti-segmented-control-button class="button-balanced" title="'title 2'"></ti-segmented-control-button>
        </ti-segmented-control>
      </div>

    </ion-header-bar>

    <ion-content class="has-subheader">

      <ion-list>
        <ion-item class="item" ng-repeat="item in items">{{item.name}}</ion-item>
      </ion-list>

    </ion-content>

  </ion-view>

在 css 中，我创建了 2 个样式，它们将应用于第二个 <ion-header-bar> 和 <ion-content>：

.bar-subheader
{
  height: 114px !important;
  border: none;

}

.has-subheader {
    top: 160px !important;
}

如您所见，它按预期工作，但您可能会遇到一些奇怪的行为。我建议使用 sass 变量。

更新：

如果您只想更改一页中的行为，您可以自定义 bar-subheader 元素：

.bar-subheader.custom
{
  height: 114px !important;
  border: none;
}

并定义一个自定义has-subheader：

.has-subheader-custom {
    top: 160px !important;
}

您将在此处参考：

<ion-header-bar class="bar bar-subheader custom">

这里：

<ion-content class="has-subheader-custom">

这个plunker 应该会指导你。