Question

我有一个Ionic＆gt; = 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

更新：要回答@ John Doe的评论..要使滚动列表占据屏幕其余部分的高度，请使用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，但是当我遇到同样的问题时，它也适用于离子2和onsen-ui。

Answer 3

我制作了一个创建这个固定卷轴的npm packge。

您需要在项目中安装和使用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

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

3 个答案: