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

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>

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

有谁知道为什么我的搜索栏在离子列表中的一个完全独立的行中也会滚动？我应该以这种方式使用离子网格吗？

提前感谢您的帮助！

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 的高度。

Answer 2

这就是我设法在页面底部滚动而不滚动整个页面的方法：

HTML

<ion-content>
    <div class="table">
        <div class="table-row">
            <ion-searchbar></ion-searchbar>
        </div>
        <div class="table-row last-row">
            <div class="table-cell cell-content-outer-wrapper">
                <div class="cell-content-inner-wrapper">
                    <div class="cell-content">
                        <ion-list>
                            <ion-item *ngFor="let item of data">
                                <div>{{item}}</div>
                            </ion-item>
                        </ion-list>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ion-content>

CSS

.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-row {
   display: table-row;
}
.table-cell {
   display: table-cell;
}
.last-row {
   height: 100%;
}
.cell-content-outer-wrapper {
   height: 100%;
}
.cell-content-inner-wrapper {
   height: 100%;
   position: relative;
   overflow: auto;
}
.cell-content {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

使用了很多 div，但当我遇到同样的问题时，它在 ionic 2 和 onsen-ui 中也适用。

Answer 3

我将 Ionic 5 与 Vue 一起使用。我想在页面顶部有一个固定的内容，下面有一个可滚动的列表。这就是我所要做的：

  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button defaultHref="/"></ion-back-button>
        </ion-buttons>
        <ion-title>Page title</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-card>
      <ion-card-content>
        <!-- Here is the fixed content -->
      </ion-card-content>
    </ion-card>

    <ion-content>
      <!-- This content will scroll -->
      <ion-list>
        <ion-item>
          <ion-label>Pokémon Yellow</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Mega Man X</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>The Legend of Zelda</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Pac-Man</ion-label>
        </ion-item>
        <ion-item>
          <ion-label>Super Mario World</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>

诀窍在于将固定内容放在<ion-header> 和<ion-content> 组件之间。

Answer 4

我制作了一个 npm 包来创建这个固定滚动。

你需要在你的项目中安装和使用 npm 包（ionic3）

npm install --save ionic2-fixedscroll-directive

在您的页面或 AppModule 上导入 ngFixedScrollDirective 模块

import { NgFixedScrollModule  } from 'ionic2-fixedscroll-directive';

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    NgFixedScrollModule
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

创建 SASS CSS 来修复元素

your-page {
   ion-searchbar {
       &.fixed {
        @extend .toolbar; //optional
        position: fixed;
        top: 0; 

        transition: all 0.5s ease;

        &.searchbar-ios {
            transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
        }

        &.searchbar-md {
            transform: translateY(#{$navbar-md-height});
        }

        &.searchbar-wp {
            transform: translateY(#{$navbar-md-height});
        }
        z-index: 3; //zindex to put it on top of some ionic components
    }
   }
}

并将指令添加到您需要在页面顶部（工具栏外）修复的组件或元素中

<YourComponent fixed-scroll></YourComponent>

关于指令 git repo 的更多信息：https://github.com/joao-gsneto/ionic2-fixedscroll-directive