ionic3 解决content的scroll滚动问题 / fi
2018-05-24 本文已影响0人
云小诺
不知道有没有小伙伴和我一样遇到这样的情况:
在四个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这个根据需要,我这里需要这么的
【重点来了】
- ion-content 需要 scroll="false"。
- 固定的区域 需要 有一个高度。
- 滚动的区域 需要 <ion-scroll></ion-scroll>,设置固定定位,top是固定区域的高度。
OK,以上就可以完美解决,已在真机测试过,no problem~