解決cover-view在安卓機上蓋不住原生組件的問題

起因是公司需要做的小程序,需要一個自定義的導航欄,類似於這樣:在這裏插入圖片描述

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章