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

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

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

  1. HTML代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .v-header{
    height:40px;
    }
    .v-panel-scroll{
    position:absolute;
    top: 40px !important;
    bottom:0;
    left:0;
    right:0;
    }
文章目录
  1. 1. 在ionic中ion-content开发上面固定下层滚动的结构
,