今天在混合APP開發(fā)中遇到了這個問題,在布局中底部tab欄塞俱,如果是利用fixed定位固定姐帚,在滾動時會出現(xiàn)tab欄消失,結束拖動事件后又顯示出來障涯,
很好罐旗,我爬了半天的坑0 - 0目前我沒發(fā)現(xiàn)一篇文章完美的解決了我的問題,大部分文章只是說了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.reibang.com/p/1f4693d0ad2d)
加到view上灵份,縱享絲滑
好吧仁堪,前面全是廢話
布局:
body ?fixed定位
view ?相對body ?absolute定位 ?-webkit-overflow-scrolling:touch;
tab ? ?相對body ?absolute定位 吸頂或者定位在你想要的地方
這里需要注意的一點是view和tab的布局問題,不要讓你的滾動條能在全屏幕滾來滾去填渠,對弦聂,就是tab上,看上去很尷尬的氛什。 可以用值去搞定莺葫,也可以直接js隨意的去定制下,新手爬坑隨筆枪眉,勿噴勿噴