在使用Uni框架開發(fā)APP、小程序中，由于原生導(dǎo)航欄和狀態(tài)欄是屬于原生框架渲染，其層級會高于所有內(nèi)容區(qū)域，包括DCloud提供的自定義彈窗組件也無法實(shí)現(xiàn)覆蓋原生導(dǎo)航欄的目的，翻閱技術(shù)資料，有不少開發(fā)者說可以使用nvue的方式來實(shí)現(xiàn)這個(gè)效果，但是感覺實(shí)現(xiàn)過程過于繁雜，而且兼容性并不是很好。

那有什么簡單的方式可以實(shí)現(xiàn)覆蓋原生導(dǎo)航欄的效果呢？答案是有的，要不然我也不會寫這篇文章來浪費(fèi)大家的寶貴時(shí)間了，對吧。著急的讀者可以先看圖，我給的圖已經(jīng)實(shí)現(xiàn)了這個(gè)效果。

首先我們要知道，通過CSS方式設(shè)置層級（z-index）的值是無法達(dá)到目的的，即便是設(shè)置為1000000或者更大，也沒有作用（發(fā)布為H5端的除外）。這個(gè)是由于Uni框架的頁面渲染邏輯形成的。

// 設(shè)置多大都無效
.popup { z-index: 1000000 }

有些技術(shù)可能會這樣做：把導(dǎo)航欄和狀態(tài)欄都改為自定義，不使用原生的方式，這樣不就解決了層級問題了嗎，是的沒錯(cuò)，這樣是可以解決問題了，但是我們在開發(fā)的時(shí)候都知道，原生導(dǎo)航欄和狀態(tài)欄不管是在渲染效果和各終端兼容性上都是非原生無法比及的。另外使用非原生的方式也不在本文討論的范疇。

我這里給大家介紹一個(gè)方法，而且還非常簡單，既然我們無法通過彈窗組件來覆蓋原生導(dǎo)航欄，那么可以把彈窗做成一個(gè)頁面，另外再把頁面渲染成彈窗效果，我們都知道，跳轉(zhuǎn)到新的頁面是可以覆蓋掉原生導(dǎo)航欄和狀態(tài)欄的，但是跳轉(zhuǎn)到新的頁面效果不好，所以我們做的就是把這個(gè)頁面做成彈窗的形式，讓用戶感覺不到是跳轉(zhuǎn)到了新的頁面，就像在當(dāng)前頁面彈出一樣（比如我們常見的在商品詳情頁領(lǐng)優(yōu)惠券功能）。

下面我們就以領(lǐng)取優(yōu)惠券功能為例，顯示優(yōu)惠券的頁面比如路徑為：pages/popup/coupon.vue 我們在pages.json文件中如下配置：

{
  "path": "pages/popup/coupon",
    "style": {
      "navigationStyle": "custom",
      "navigationBarTextStyle": "white",
         "app-plus": {
           "animationType": "fade-in",
           "background": "transparent",
           "backgroundColor": "transparent",
           "popGesture": "none" // 關(guān)閉IOS屏幕左邊滑動關(guān)閉當(dāng)前頁面的功能
        }
    }
}

然后我們在需要彈出領(lǐng)券頁面vue文件寫（注意使用 open-type="navigate"的方式）：

<navigator url="/pages/popup/coupon" hover-class="none">領(lǐng)券</navigator>

僅僅以上兩個(gè)步驟，就完成了自定義彈窗覆蓋原生導(dǎo)航欄和狀態(tài)欄的效果，并且兼容APP和小程序，在H5端會差點(diǎn)不過也能接受，如果希望更好的效果建議使用上面介紹的設(shè)置層級的方法。

有部分用戶反饋這種方式不好交互傳值，其實(shí)這個(gè)并不是問題，也有解決方案，我們可以采用 uni.setStorageSync 或者直接頁面?zhèn)鲄⒌姆绞蕉际强梢缘摹?/p>

需要uni源碼的可以到Dcloud插件市場下載，完全免費(fèi)：可覆蓋原生導(dǎo)航欄和狀態(tài)欄的彈窗效果

以上是Uniapp開發(fā)中自定義彈窗如何覆蓋原生導(dǎo)航欄和狀態(tài)欄的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！