與滾動列表視圖離子

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 

和離子會創建SCSS文件和相關吞氣任務。

正如你可以看到here的副標題

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

的高度等於標題的高度：44px：

$bar-height: 44px !default; 

你可以改變的值$bar-subheader-height添加一條線ionic.app.scss文件（文件夾scss）：

$bar-subheader-height: 150px; 

和gulp任務將編譯到修改後的css文件中。

另一種選擇是重新定義CSS規則。正如你在這個plunker

看到我有（使用相同的指令ion-header-bar）報頭和子頭：在我創建了2款，其將要應用到第二的CSS

<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> 

<ion-header-bar>和<ion-content>：

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

} 

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

正如你可以看到它按預期工作，但你可能在一些奇怪的行爲運行。我會建議去sass變量。

UPDATE：

如果你只是想改變一個頁面的行爲，你可以自定義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應該引導你。