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

Question

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

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

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

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

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

在此先感谢您的帮助!

Answer 1

ion-content没有scroll输入属性来禁用它.
如果您需要searchbar始终可见,我建议您将其放在工具栏中.

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

样品Plunkr

更新:要回答@ JohnDoe的评论..为了获得滚动列表,取屏幕其余部分的高度,使用视口百分比高度来设置高度ion-scroll.