天天看點

小程式cover-view元件fixed時定位異常

       我們的頁面上有個echarts的圖表,然後需要在頁面底部放置一個底部導航,由于canvas原生元件層級最高且頁面布局要求很高(詳見微信小程式canvas元素懸浮,不随父元件滾動的問題),是以隻能使用可自定義層級的cover-view元件來作為fixed在底部的元素元件。

       但是後面發現cover-view雖然設定了bottom:0,但是在ios上偶現的會浮在頁面上的其他位置,而不是在底部。後來經過多種方式的定位,發現是頁面初始化時,在頁面其他元素還沒有加載完時,整個頁面的容器高度還沒有撐開。複現方式,去掉頁面上的其他元素,隻保留cover-view這個fixed元素,會發現這個元素沒用辦法正确定位到正确的位置了。這裡應該屬于微信開平的一個渲染bug,但是我們在業務側需要解決,我們最終的解決方案是給page元素設定最小高度,min-height:100vh,以及包含cover-view的父元素也設定min-height:100vh。

      當然,如果是自定義導航欄,100vh并不能解決這個問題,因為這個bug的存在,頁面渲染時100vh并沒有包含導航欄的高度,是以這個時候,你可以盡可能的設定大一點,以確定這個bug不會出現,比如設定min-height:150vh,确認确實是這個問題後,再調到合适的min-height高度。