在ionic中ion-content开发上面固定下层滚动的结构

在ionic中ion-content开发上面固定下层滚动的结构

有时候需要用到页面下滑的时候保留导航栏在顶部，此时就会需要在ionic中ion-content开发上面固定下层滚动的结构。设置ion-content的滚动为false，增加一个ion-scroll在ion-content中。

1. HTML代码

   <ion-content scroll="false">
     <div class="v-header">
       固定不动的顶栏
     </div>
     <ion-scroll direction="y" class="v-panel-scroll">
       <div class="list">
         <div class="item">test1</div>
         <div class="item">test2</div>
         <div class="item">test3</div>
         <div class="item">test4</div>
       </div>
     </ion-scroll>
   </ion-content>

2. CSS代码

   .v-header{
     height:40px;
   }
   .v-panel-scroll{
     position:absolute;
     top: 40px !important;
     bottom:0;
     left:0;
     right:0;
   }