ionic3 解决content的scroll滚动问题 / fixed的问题

不知道有没有小伙伴和我一样遇到这样的情况:
在四个tab下面,还需要个div固定在上面。
网页上怎么测试都没有问题,但是真机测试的时候,我的div虽然fixed在最上面,还是会随着内容的滚动而滚动。总之,问题很多。

解决方式如下:

<ion-content scroll="false">
    <div class="a a a">
        <span>
            <ion-icon [ngClass]="{'selected': isClick}"></ion-icon>
        </span>
        <span>
            <ion-icon [ngClass]="{'selected': !isClick}"></ion-icon>
        </span>
    </div>
    <ion-scroll class="b b b" direction="y">
        <ion-card *ngFor="let item of Cards">
            ...
        </ion-card>
    </ion-scroll>
</ion-content>
.a a a{
  height:6rem;
  ...
}

.b b b{
    position: absolute;
    top: 6rem !important;
    ...
    .scroll-content{
      overflow-y: scroll;
    }
}


.scroll-content这个根据需要,我这里需要这么的

【重点来了】

  1. ion-content 需要 scroll="false"。
  2. 固定的区域 需要 有一个高度。
  3. 滚动的区域 需要 <ion-scroll></ion-scroll>,设置固定定位,top是固定区域的高度。

OK,以上就可以完美解决,已在真机测试过,no problem~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容