css3 – 如何在固定搜索栏下有一个Ionic> = 2可滚动离子列表

我有一个Ionic> = 2应用程序,我希望在页面顶部有2或3个固定行,然后将页面的其余部分作为可滚动列表(后来我希望它是虚拟的,但是只是想让简单的列表工作得最好.

作为一个简化的例子,我有以下plunk.这里重复的标记是..

<ion-header>
          <ion-navbar>
            <ion-title>{{ appName }}</ion-title>
           </ion-navbar>
    </ion-header>

    <ion-content scroll=false>
       <ion-grid>
         <!-- Row 1 fixed at top -->
         <ion-row>
           <ion-col>
             <ion-searchbar></ion-searchbar>   
           </ion-col>
           <!-- Other cols -->
         </ion-row>

        <!-- Row 2 Scrollable list -->
        <ion-row>
          <ion-col>
            <ion-list>    
              <ion-item *ngFor="let item of data">      
                <div>{{item}}</div>
              </ion-item>          
            </ion-list >  
          </ion-col>
       </ion-row>

       </ion-grid>
    </ion-content>

问题是搜索栏也会滚动列表,而我希望它始终保持在页面顶部可见.

有没有人知道为什么我的搜索栏也会滚动到这个与离子列表完全分开的行？我应该以这种方式使用离子网吗？

在此先感谢您的帮助！

解决方法

ion-content没有滚动输入属性来禁用它.
如果您需要始终显示搜索栏,我建议您将其放在工具栏中.

<ion-header>
      <ion-navbar>
        <ion-title>{{ appName }}</ion-title>
       </ion-navbar>
       <ion-toolbar>
           <ion-searchbar></ion-searchbar>
       </ion-toolbar>
</ion-header>

或者使用固定高度的ion-scroll.

<ion-grid>
    <!-- Row 2 Scrollable list -->
    <ion-row>
      <ion-col>
          <ion-searchbar></ion-searchbar>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100vh" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of data">
            <div>{{item}}</div>
          </ion-item>
        </ion-list>
        </ion-scroll>

      </ion-col>
    </ion-row>

  </ion-grid>

Sample Plunkr

更新：要回答@ JohnDoe的评论..为了获得滚动列表以获取屏幕其余部分的高度,使用Viewport percentage height设置离子滚动的高度.