滚动场景在App的开发过程中很常见,而且在我们公司滚动的方式多种多样,在解决bug的道路上,引发了我关于滚动的一些思考。
使用过ionic的都知道,要想使ion-scroll
可以滚动,则必须设置滚动视图的大小。否则无法滚动(提示
:如果你发现你没那么做,可以滚动,请不要高兴的太早哈,因为不会发现PC和手机端总有一个会出问题,都没出问题的话,某些手机机型也有可能会出问题)。
今天我就在思考,ion-scroll
必须设置大小才能滚动,那为什么ion-content
可以直接滚动呢?审查元素可以发现,ion-content
的高度为是确定了的,如果有header
,ionic会为ion-content
添加has-header
样式,类似的样式还有has-footer
和has-tabs
等。
ionic结构
审查元素看完ionic的结构,一些思路也就很清晰了。仔细看ionic项目中的body元素的高度为零。而是通过一个绝对定位元素达到整屏的目的。
ion-nav-view
直接上关键样式,样式的主要目的就是达到全屏。
.view-container {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
ion-view
这个样式和ion-nav-view
有点类似,但是给了一个新思路,个人觉得这里的width
和height
已经没有必要了,新思路就是在绝对定位下,可以通过top
、bottom
、left
、right
细分区域大小。
.pane, .view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ion-content
这里思路也就很清晰了,首先使用绝对定位配合top
、bottom
、left
、right
值为0占满全屏,然后根据头尾是否有header
、footer
、tabs
情况进行细分。
.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
元素了,因为通过绝对定位需要知道非滚动区域的大小。