小程序原生組件層級遮擋其他組件問題


這學習小程序中,仿做其他項目時遇到這種情況,video標簽把自定義的導航欄(非小程序的tabBar),在把導航欄的z-index:9999也無濟於事,這是因為video等原生組件的層級是最高的,所以無論所以頁面中的其他組件無論設置 z-index 為多少,都無法蓋在原生組件上(后插入的原生組件可以覆蓋之前的原生組件)

好在小程序為我們提供了解決這個問題的辦法,那就是cover-view和cover-image組件,可以覆蓋在部分原生組件上面。這兩個組件也是原生組件,但是使用限制與其他原生組件有所不同

cover-view組件里面只能嵌套cover-view和cover-image組件,嵌套其他的組件如view組件,那么view 標簽的子節點樹在真機上都會被忽略

文檔說明:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

使用cover-view后的效果

 

但是這樣又會出現一個新問題,那就是當導航欄使用position:fixed定位,視頻全屏播放的時候,導航欄會出現在視頻上方,效果

解決方法

1、導航欄不使用定位

2、不使用cover-view組件,在渲染頁面的時候我們使用view視頻的封面,當點擊播放的時候把view封面隱藏,播放視頻,視頻播放完畢后再把視頻隱藏、封面顯示,但是播放視頻時還是存在開始所提到的問題

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM