今天在混合APP开发中遇到了这个问题,在布局中底部tab栏,如果是利用fixed定位固定,在滚动时会出现tab栏消失,结束拖动事件后又显示出来,
很好,我爬了半天的坑0 - 0目前我没发现一篇文章完美的解决了我的问题,大部分文章只是说了fixed定位换到body上0 -0然后就没然后了,或者是配合iScroll.js使用,并不想加三方库。
扒了ionic关于头尾的样式,他是摒弃了头尾fixed定位,body加fixed定位,定位0,0。头部+view+尾部三部分用绝对定位解决位置(absolute),其中有个属性well-change:scroll-position;新鲜玩意儿,暂时不说0 -0心想没准儿能救我,哈哈哈,改了布局后,中间滚动卡的一批 0 - 0,别说商用了,boss分分钟得撕我。
查询了well-change:scroll-position;这个属性 就是告诉机器,我要开始滚了,请开启Gpu,让我滚得快点儿,当然0 -0他还有很多值可以填写,加上他,果然0 -0还是卡的一批(具体:http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/)
查询到ios为了应对这种出了个属性 -webkit-overflow-scrolling:touch;(具体:http://www.jianshu.com/p/1f4693d0ad2d)
加到view上,纵享丝滑
好吧,前面全是废话
布局:
body fixed定位
view 相对body absolute定位 -webkit-overflow-scrolling:touch;
tab 相对body absolute定位 吸顶或者定位在你想要的地方
这里需要注意的一点是view和tab的布局问题,不要让你的滚动条能在全屏幕滚来滚去,对,就是tab上,看上去很尴尬的。 可以用值去搞定,也可以直接js随意的去定制下,新手爬坑随笔,勿喷勿喷