起因是公司需要做的小程序,需要一個自定義的導航欄,類似於這樣:
由於使用的原生的組件canvas,在真機測試的時候,出現了菜單無法遮蓋canvas的情況。如下圖:
查詢資料瞭解到 ,是因爲原生組件層級的原因。
通過使用cover-view解決了以上問題。
但是安卓機真機測試時發現,即使使用了cover-view依然無法覆蓋。
查閱資料發現,原因在於系統頁面渲染的差異,在安卓中頁面dom的渲染並不是完成按照上下順序來的,
有可能出現寫在後面的dom被先渲染出來,因此會隨機出現能蓋住、不能蓋住的情況。
解決方案:添加定時器,確保cover-view是後被渲染出來的。
這種方案確實可以解決問題,但是添加了定時器之後,菜單欄會延後顯示,顯示之前出現了短暫空白,體驗感不太好。
優化:利用組件的生命週期,mounted
實測相比於添加定時器,性能有所提升。