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-scroll direction="y"></ion-scroll>，但滚动视图没有滚动到列表项的底部。

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

提前感谢。

修改

plunker（感谢LeftyX获取可运行的代码）

Answer 1

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

您可以在应用目录中运行：

ionic setup sass

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

正如您可以看到here副标题的高度

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

等于标题的高度：44px：

$bar-height: 44px !default;

您可以更改$bar-subheader-height文件（文件夹scss）中添加一行ionic.app.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应该为您提供指导。

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

1 个答案: