css - 如何在固定搜索栏下有一个 >=2 的可滚动 ionic 列表

Question

我有一个 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>

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

有谁知道为什么我的搜索栏在与 ionic 列表完全不同的行中时也会滚动？我应该以这种方式使用 ionic 网格吗？

在此先感谢您的帮助!

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>

Sample Plunkr

更新:回答@JohnDoe 的评论.. 为了让滚动列表占据屏幕其余部分的高度，请使用 Viewport percentage height设置 ion-scroll 的高度。