Better

Ethan的博客,欢迎访问交流

Ionic中滚动的思考

滚动场景在App的开发过程中很常见,而且在我们公司滚动的方式多种多样,在解决bug的道路上,引发了我关于滚动的一些思考。

使用过ionic的都知道,要想使ion-scroll可以滚动,则必须设置滚动视图的大小。否则无法滚动(提示:如果你发现你没那么做,可以滚动,请不要高兴的太早哈,因为不会发现PC和手机端总有一个会出问题,都没出问题的话,某些手机机型也有可能会出问题)。

今天我就在思考,ion-scroll必须设置大小才能滚动,那为什么ion-content可以直接滚动呢?审查元素可以发现,ion-content的高度为是确定了的,如果有header,ionic会为ion-content添加has-header样式,类似的样式还有has-footerhas-tabs等。

ionic结构

审查元素看完ionic的结构,一些思路也就很清晰了。仔细看ionic项目中的body元素的高度为零。而是通过一个绝对定位元素达到整屏的目的。

ion-nav-view

直接上关键样式,样式的主要目的就是达到全屏。

.view-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

ion-view

这个样式和ion-nav-view有点类似,但是给了一个新思路,个人觉得这里的widthheight已经没有必要了,新思路就是在绝对定位下,可以通过topbottomleftright细分区域大小。

.pane, .view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

ion-content

这里思路也就很清晰了,首先使用绝对定位配合topbottomleftright值为0占满全屏,然后根据头尾是否有headerfootertabs情况进行细分。

.scroll-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: auto;
    height: auto;
}
.has-header {
    top: 44px;
}
.has-tabs, .bar-footer.has-tabs {
    bottom: 49px;
}

总结

很多时候确定容器的大小习惯使用百分比,但是在排除掉一部分区域的时候表现的不是很灵活,ionic的布局中给了一种新思路!

目前办法的不足

CSS3提出的flex弹性盒子布局确实很好用,很多用CSS2很麻烦的问题,用flex布局都会迎刃而解,导致本人很多时候没有细加思考直接使用flex布局,但是flex布局在某些设备上存在不兼容的问题,因此在这里想说的是当你用flex布局时,多想一想可不可以使用CSS2解决呢,很多时候使用CSS2看起来会很酷。

目前在项目中碰到局部滚动的情形时,很多的时候使用flex布局,将剩余区域通过flex:1的方式分配给ion-scroll,这样一来设置了ion-scroll滚动区域的大小,也就实现了滚动。

通过ionic给的思路可以发现,我们可以不通过百分比或者flex布局,而是通过绝对定位来设置ion-scroll的大小。

那么是否flex布局在这里就没有应用场景了呢?当然不是,如果非滚动区域的大小是动态的时,我们也就只能通过flex布局来实现自动将剩余区域分配给ion-scroll元素了,因为通过绝对定位需要知道非滚动区域的大小。



留言