小程序 滑動菜單欄吸頂效果 抖動優化

 

1. 先來看一下未滑動的效果,(樣式隨便寫的,但願儘可能簡單)css

 

 

 

2.滑動到菜單欄以後的吸頂效果html

 

 

 

 3. 個人html佈局,小程序我用的是mpvue寫的,使用了scss,能夠自行下載demo後改成原生小程序標籤vue

 

 

吸頂效果的實現思路:ios

1.獲取菜單欄距離文檔頂部的距離,也就是頭部區域的高度headHeight,使用小程序的api,能夠得到指定節點的高度git

2. 監聽頁面滾動距離scrollTop,小程序api, onPageScroll,監聽頁面滾動github

3.當scrollTop > headHeight的時候,添加吸頂樣式的class,實現吸頂效果小程序

這樣寫以後,測試了一下,吸頂的時候抖動會比較嚴重api

 

優化方案app

1. 菜單欄初始定位爲相對menu-wrapper 絕對定位,這樣,能夠給內容區增長padding-top,padding-top值爲菜單欄的高度佈局

2. 內容區用scroll-view包裹,未吸頂以前,禁用當前scroll-view的滾動,吸頂以後,才啓用滾動

加了兩個優化方案以後,吸頂效果抖動沒這麼厲害,ios仍是會有點點,安卓就很平滑了。

 

須要注意的是,使用小程序的api獲取頭部的高度時,頭部的高度須要明確指定了高度,不然獲取到的高度可能不許。

 

完整代碼,請上github查看,有註釋,推薦點擊連接看30秒,哈哈~,https://github.com/daisygogogo/my-demo/blob/master/index.vue

相關文章
相關標籤/搜索